Reputation: 339
How to expand the "Y" scale of the data to lookes more beautiful? The bar data is cut off by the top border of the graph. If the maximum number is 100, then display, for example, 110, that would be a small padding from the top border.
My code: https://jsfiddle.net/selvestrstal/ent8zchq/
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "First dataset",
data: [65, 100, 100, 81, 56, 55, 90]
}, {
label: "Third dataset",
data: [38, 55, 50, 65, 35, 67, 54]
}]
};
var chart = new Chart('graph_data', {
type: 'line',
data: data,
options: {
maintainAspectRatio: false,
responsive: true,
filler: {
propagate: true
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
title: function(i, val) {
return [0].xLabel;
},
},
},
legend: {
display: true,
},
layout: {
padding: {
left: 5,
right: 5,
top: 5,
bottom: 10
}
},
scales: {
padding: 10,
xAxes: [{
display: true,
ticks: {
autoSkip: true,
offset: true,
maxRotation: 0,
padding: 5,
},
scaleLabel: {
display: true,
}
}],
yAxes: [{
display: true,
ticks: {
autoSkip: true,
offset: true,
maxRotation: 0,
beginAtZero: false,
padding: 5,
},
}]
}
}
});
Upvotes: 0
Views: 939
Reputation: 983
Override the scale:
Try something like this:
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 50,
scaleStartValue : 0
});
}
A max
option is also viable, as it helped the author of the question.
Upvotes: 1