score:3

Accepted answer

finally i got the solution after many trial-and-errors. i have to say that the documentation of chart.js is quite unclear and should be improved.

my findings are:

  • xlabels and ylabels approach is not working. there are no clear documentation on these two parameters.
  • don't care about setting the type to category. chart.js only accepts numerical values; you have to map the values to strings by using your own callback method.

var options = {
    type: "line",
    data: {
        labels: ['january', 'february', 'march', 'april', 'may', 'june'],
        datasets: [{
            label: "my first dataset",
            data: [1, 2, 3, 1, 1, 1],
            fill: false,
            bordercolor: "rgb(75, 192, 192)",
            linetension: 0.1
        }]
    },
    options: {
        scales: {
            yaxes: [{
                ticks: {
                    max: 3,
                    min: 1,
                    stepsize: 1,
                    callback: function(label, index, labels) {
                        switch (label) {
                            case 1:
                                return 'a';
                            case 2:
                                return 'b';
                            case 3:
                                return 'c';
                        }
                    }
                }
            }]
        }
    }
}

var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
    <canvas id="chartjscontainer" width="600" height="400"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/chart.min.js"></script>


Related Query

More Query from same tag