How to skip labels on x-axes?

Question

I've been trying for a long time now to figure out how to skip labels on the x-axes of this chart. So, for instance, display every third or fourth label. I've tried adding autoSkip and stepSize to the tick-configuration, but nothing changes. Is there a simple way to do this?

Edit:

visitorsLabels = ["januar", "desember", "november", "oktober", "september", "august", "juli", "juni", "mai", "april", "mars", "februar"]

var visitors_data = [2, 4, 2, 1, 2, 4, 2, 1, 2, 4, 2, 1];

var ctx1 = $("#chart-visitors"); 

var graph_visitors_preset = {
    labels: visitorsLabels,
    datasets: [
        {
            fill: true,
            lineTension: 0.1,
            backgroundColor: "#f9f9f9",
            borderColor: "#72bce3",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: visitors_data,
            spanGaps: true,
        }
    ]
};
var chart_visitors = new Chart(ctx1, {
    type: 'line',
    data: graph_visitors_preset,
    options: {
        responsive: true,
        legend: { display: false },
        scales: {
            xAxes: [{

                ticks: {autoSkip: true, stepSize: 3, max: 5, min: 2},
                gridLines: {
                    display: false
                }
            }],
            yAxes: [{

                gridLines: {
                    display: false
                }
            }]
        }
    }
});

Answer 1

In the chart options, you can change an axe's ticks' callback to display the tick (the label) based on a value, or even change what it displays :

options: {
    scales: {
        xAxes: [{
            ticks: {
                callback: function(tick, index, array) {
                    return (index % 3) ? "" : tick;
                }
            }
        }]
    }
}

This option basically display one tick every three.

---

You can check a full script in this jsfiddle, and here is its result :