question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'autoskip' feature in chartjs, doesn't seem to be working.

See original GitHub issue

Note: I have posted in stackoverflow already. Will close this if resolved on that side of things. https://stackoverflow.com/questions/58526217/how-do-i-implement-the-autoskip-feature-in-chartjs





Capture

I am trying to use the autoSkip feature found here in the chart.js documentation:

https://www.chartjs.org/docs/latest/axes/cartesian/?h=autoskip

The issue I am having is my x-axes labels are overlapping (see above example). Everything I have read says this autoSkip feature should automatically skip overlapping labels. However, when setting this to both true or false, nothing seems to change in my chart.

<Line
    data={this.state.chartData}
    options={{
      elements: {
        point: {
          radius: 2
        }
      },
      tooltips: {
        mode: 'nearest',
        intersect: false
      },
      scales: {
        yAxes: [{
          ticks: {
            stepSize: 1, //sets the interval that our y axis counts by
            beginAtZero: false, //starts our graph at 0 if true
          },
          gridLines: {
            drawOnChartArea: false
          }
        }],
        xAxes: [{
          ticks: {
            minRotation: 88,
            autoskip: true,
            autoSkipPadding: 50
          },
          gridLines: {
            drawOnChartArea: false
          },
          type: 'time',
          distribution: 'series',
          time: {
            unit: 'day',
            displayFormats: {
              day: 'MMM D',

            },
            tooltipFormat: 'MMM D h:mm a',
          },
        },
        ]
      },
      responsive: true, //lets us resize our chart
      maintainAspectRatio: true,  //lets us resize our chart
    }
    }

  />

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
benmccanncommented, Oct 23, 2019

Hi @Outlaw782. We’re just finishing up rewriting the auto-skip feature right now. Most of the code has already been committed and there are just a couple small PRs pending right now to fix some remaining rough edges. We’ll hopefully release 2.9.0 very soon where I’d expect this to work better

0reactions
benmccanncommented, Oct 31, 2019

Can you share an interactive example on something like plunkr?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Chartjs autoSkip true not working in Angular - Stack Overflow
I have tried the solutions in stackoverflow. But the auto skip feature seems to be not working properly.(chartjs version => 2.9.3).
Read more >
Cartesian Axes - Chart.js
Turn autoSkip off to show all labels no matter what. autoSkipPadding, number, 3, Padding between the ticks on the horizontal axis when autoSkip ......
Read more >
AutoSkip: False not working on time xAxes labels-Chart.js
In my case, I needed to set source: date . You will get all the date steps on xAxi. By the way, try...
Read more >
JIRA Gadget with ChartJS doesn't work until refresh
After inspecting my code, it seems that my canvas element that I use with ChartJS only appears after this refresh, so I suspect...
Read more >
chart js show x axis labels
You can add a custom onclick function to the chart and then ask chartjs for the ... Seems like autoSkip shows all labels...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found