Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Limit labels number on Chart.js line chart

I want to display all of the points on my chart from the data I get, but I don't want to display all the labels for them, because then the chart is not very readable. I was looking for it in the docs, but couldn't find any parameter that would limit this.

I don't want to take only three labels for example, because then the chart is also limited to three points. Is it possible?

I have something like that right now:

enter image description here

If I could just leave every third-fourth label, it would be great. But I found absolutely nothing about labels options.

like image 261
mmmm Avatar asked Feb 27 '14 09:02

mmmm


4 Answers

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

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]
like image 123
Nikita Ag Avatar answered Nov 12 '22 02:11

Nikita Ag


For concreteness, let's say your original list of labels looks like:

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

If you only want to display every 4th label, filter your list of labels so that every 4th label is filled in, and all others are the empty string (e.g. ["0", "", "", "", "4", "", "", "", "8"]).

like image 23
ben Avatar answered Nov 12 '22 01:11

ben


For anyone looking to achieve this on Chart JS V2 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 options variable as usual into a:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`
like image 17
George D Avatar answered Nov 12 '22 01:11

George D


UPDATE:

I'v updated my fork with the latest pull (as of Jan 27, 2014) from NNick's Chart.js master branch. https://github.com/hay-wire/Chart.js/tree/showXLabels

ORIGINAL ANSWER:

For those still facing this issue, I forked Chart.js a while back to solve the same problem. You can check it out on: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Older branch! Check showXLabels branch for latest pull.

How to use:

Applicable to bar chart and line chart.

User can now pass a { showXLabels: 10 } to display only 10 labels (actual displayed labels count might be a bit different depending on the number of total labels present on x axis, but it will still remain close to 10 however)

Helps a lot when there is a very large amount of data. Earlier, the graph used to look devastated due to x axis labels drawn over each other in the cramped space. With showXLabels, user now has the control to reduce the number of labels to whatever number of labels fit good into the space available to him.

See the attached images for a comparison.

Without showXLabels option: enter image description here

With { showXLabels: 10 } passed into option: enter image description here

Here's some discussion on it: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

like image 15
Haywire Avatar answered Nov 12 '22 03:11

Haywire