Limit the number of labels on a chart.js chart

Question

I want to display all the points on my chart from the data that I get, but I do not want to display all the labels for them, because then the chart is not very readable. I searched for it in the docs, but could not find a single parameter that would limit this.

I do not want to take only three labels, for example, because then the diagram is also limited to three points. Is it possible?

I have something like this right now:

If I could just leave every third fourth label, it would be great. But I did not find anything about shortcut methods.

Answer 1

Try adding the options.scales.xAxes.ticks.maxTicksLimit parameter:

 xAxes: [{ type: 'time', ticks: { autoSkip: true, maxTicksLimit: 20 } }] 

Answer 2

For concreteness, let's say your initial list of tags looks like this:

["0", "1", "2", "3", "4", "5", "6", "7", "8"]

If you want to display only every 4th label, filter the list of labels so that every fourth label is filled and all the others are empty lines (for example, ["0", "", "", "", "4", "", "", "", "8"] ).

Answer 3

UPDATE:

I updated my last-click plug (as of January 27, 2014) from the main NNick Chart.js branch. https://github.com/hay-wire/Chart.js/tree/showXLabels

ORIGINAL RESPONSE:

For those who are still facing this problem, I searched Chart.js some time ago to solve the same problem. You can check this: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Old branch! Check out the showXLabels branch for the latest pull.

How to use:

Applicable to bar graph and line chart.

Now the user can pass { showXLabels: 10 } to display only 10 labels (the actual number of labels displayed may vary slightly depending on the number of complete labels available on the x axis, but it will still stay next to 10)

It helps when there is a very large amount of data. Earlier, the graph was used to look devastated due to x-axis labels drawn one above the other in tight space. With showXLabels , the user now has a control to reduce the number of tags to any number of tags suitable for use in the space available to him.

See attached images for comparison.

Without showXLabels option:

With { showXLabels: 10 } passed to the option:

Here are some discussions: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

Answer 4

For those who want to achieve this on a JS V2 diagram, the following will work:

  var options = { scales: { xAxes: [{ afterTickToLabelConversion: function(data){ var xLabels = data.ticks; xLabels.forEach(function (labels, i) { if (i % 2 == 1){ xLabels[i] = ''; } }); } }] } } 

Then pass the parameter variable, as usual, to:

 myLineChart = new Chart(ctx, { type: 'line', data: data, options: options });` 

Answer 5

According to chart.js github issue # 12 . Current solutions include:

• Use 2.0 alpha (not for production)
• Hide the x axis in general when it becomes too crowded (cannot accept at all)
• manual label control skip x axis (not on responsive page)

However, after a few minutes, I think there is a better solution.

The following snippet will hide the shortcuts automatically . Change xLabels an empty line before calling draw() and restore them after that. Moreover, the repeated rotation of x-marks can be applied, since there is more space after hiding.

 var axisFixedDrawFn = function() { var self = this var widthPerXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / self.xLabels.length var xLabelPerFontSize = self.fontSize / widthPerXLabel var xLabelStep = Math.ceil(xLabelPerFontSize) var xLabelRotationOld = null var xLabelsOld = null if (xLabelStep > 1) { var widthPerSkipedXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / (self.xLabels.length / xLabelStep) xLabelRotationOld = self.xLabelRotation xLabelsOld = clone(self.xLabels) self.xLabelRotation = Math.asin(self.fontSize / widthPerSkipedXLabel) / Math.PI * 180 for (var i = 0; i < self.xLabels.length; ++i) { if (i % xLabelStep != 0) { self.xLabels[i] = '' } } } Chart.Scale.prototype.draw.apply(self, arguments); if (xLabelRotationOld != null) { self.xLabelRotation = xLabelRotationOld } if (xLabelsOld != null) { self.xLabels = xLabelsOld } }; Chart.types.Bar.extend({ name : "AxisFixedBar", initialize : function(data) { Chart.types.Bar.prototype.initialize.apply(this, arguments); this.scale.draw = axisFixedDrawFn; } }); Chart.types.Line.extend({ name : "AxisFixedLine", initialize : function(data) { Chart.types.Line.prototype.initialize.apply(this, arguments); this.scale.draw = axisFixedDrawFn; } }); 

Note that clone is an external dependency.

Answer 6

I had a similar type of problem, and I was provided with a good solution for my specific problem to show the shortcut in the tooltip, but not along the x axis for the chart diagram chart . See if this helps you.

Answer 7

In the Chart.js file you should find (on line 884 for me)

 var Line = function(... ... function drawScale(){ ... ctx.fillText(data.labels[i], 0,0); ... 

If you just transfer this one-line call to fillText using if ( i % config.xFreq === 0){ ... } and then add the line xFreq : 1 , you should start using xFreq in options when calling new Chart(ctx).Line(data, options) .

Remember that these are pretty hacks.

Answer 8

This answer works like a charm.

If you are curious about the clone function, try the following:

 var clone = function(el){ return el.slice(0); }