score:23

Accepted answer

just extend the line chart and replace the xlabels you don't want after your initialization

chart.types.line.extend({
    name: "linealt",
    initialize: function (data) {
        chart.types.line.prototype.initialize.apply(this, arguments);
        var xlabels = this.scale.xlabels
        xlabels.foreach(function (label, i) {
            if (i % 2 == 1)
                xlabels[i] = '';
        })
    }
});


var linechartdata = {
    labels: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],
    datasets: [
        {
            fillcolor: "#79d1cf",
            strokecolor: "#79d1cf",
            data: [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65]
        }
    ]
};

var ctx = document.getelementbyid("mychart").getcontext("2d");
var myline = new chart(ctx).linealt(linechartdata);

fiddle - http://jsfiddle.net/ttz5t3dx/


enter image description here

score:1

at chart options, under xaxes you can specify the maxticklimit property to whatever you like:

xaxes: [{
        ticks: {
        autoskip:true,
        maxtickslimit:3
        }
     }]

fiddle : https://jsfiddle.net/p63z7zys/1/

score:1

this was one of the trickiest things that i deal with while using chartjs.

i'm going to share my solution: i just played with the chart options. first i will define some properties for my xaxe. note that i'm formatting the label using the callback:

scales: {
    xaxes: [{
       id: "x-", stacked: false, ticks: { 
       autoskip: false, callback: (label) => { return label + "test" } }
       }
    ]}

to format the tooltip title i'm going to use callbacks options for the tooltips:

    tooltips: {
        callbacks: {
            title : (tooltipitems, data) => {
               var labelindex = tooltipitems[0].index;
               var reallabel = data.labels[labelindex];
               return reallabel + "tooltip";
      }
    }
  }

using the chart options like that, i'm able to show different content for the x-axis labels and the corresponding tooltip titles:

enter image description here

you can find the full sample here.

hope this helps.

score:3

to extend on potatopeelings answer, we can do:

var xlabels = this.scale.xlabels
var modval = math.ceil( xlabels.length / 10)                    
xlabels.foreach(function (label, i)
{
    if (i % modval != 0)
        xlabels[i] = '';
})

to limit the number of labels (in this case 10) so your labels will never be crowded no matter how many data points you have.

score:5

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
});`

Related Query

More Query from same tag