How do I implement the 'autoskip' feature in chartjs?

问题

Example

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
    }
    }

  />

回答1:

I noticed your autoskip is in lower case where in the documentation its in camlcase (ie. autoSkip) - from my experience with Chartjs, I've found that it might make a difference to try and fix that and see if that does the trick

回答2:

You could try changing

distribution: series

distribution: linear

It looks to me like its trying to space the data evenly, despite the fact that you're missing data for 3 days (the weekend maybe?). It really shouldn't break your labels... but I bet the labels know there's enough space for n labels on the graph, but they don't realize that three of the labels are being squished together.

The default distribution is linear, so you could also just remove it. (https://www.chartjs.org/docs/latest/axes/cartesian/time.html#scale-distribution)

回答3:

For anyone wondering, a chartjs dev has replied to my post here: https://github.com/chartjs/Chart.js/issues/6591

Looks like there are some issues in the current Chart.js version. Should be fixed in 2.9.

回答4:

In case anyone is wondering, please update to 2.9. Confirmed that the issue is resolved there.

https://github.com/chartjs/Chart.js/issues/6591

来源：https://stackoverflow.com/questions/58526217/how-do-i-implement-the-autoskip-feature-in-chartjs

标签

javascript

reactjs

chart.js