Janaka Dombawela Janaka Dombawela - 5 months ago 29
HTML Question

Show all values in Chart js y axis

I have following chart:
Chart

I want letters in my y-axis so I have added a switch in my chart options for triggering the appropriate letter for a y axis value. My problem is that the y axis shows only even values thus returning in the half of the switch values(xc,B,A+, etc...). But I want to show all the values in y axis, 0 to 13. Is there any method of achieving this? Help is really appreciated.



var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: "My First dataset",
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 2,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [0, 1, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13],
}]
};

var options = {
scales: {
yAxes: [{
ticks: {
// Create scientific notation labels
callback: function(value, index, values) {
switch (value) {
case 0:
return 'XC';
case 1:
return 'C';
case 2:
return 'B';
case 3:
return 'A';
case 4:
return 'A+';
case 5:
return 'BA';
case 6:
return 'N+';
case 7:
return 'C-';
case 8:
return 'D+';
case 9:
return 'D';
case 10:
return 'D-';
case 11:
return 'N';
case 12:
return 'N-';
case 13:
return 'NR';
default:
return '';
break;
}
}
}
}]
}
};

var ctx = $('#chart');
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="chart"></canvas>



Answer

In the ticks object you can also supply min, max and stepSize to override the default auto adjust behaviour

(more information can ben seen in the docs on all available properties)

ticks: {
    min: 0,
    max: 13,
    stepSize: 1,
    ........REST OF THE OBJECT.....

Fiddle