Pontos altos e baixos no gráfico sendo cortados
Os pontos altos e baixos deste gráfico estão sendo cortados. Existe alguma maneira de corrigir issosem sabendo quais números estarão nos dados?
Vi outras pessoas criarem algum preenchimento com os valores mínimo e máximo do gráfico, mas não sei quais serão os valores antes.
Gráfico:
Um exemplo semelhante que sofre do mesmo problema é mostrado aqui:http://codepen.io/erose/pen/LNwdQO/
Aqui está o HTML:
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
Aqui está o CSS:
.chart-container {
width: 493px;
height: 83px;
}
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
e aqui o JS usado para criar o gráfico acima:
var ctx = $("#chart");
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.backgroundColor = "lightblue";
Chart.defaults.global.tooltips.bodyFontFamily = "sans-serif";
Chart.defaults.global.tooltips.bodyFontSize = 20;
Chart.defaults.global.tooltips.bodyColor = "#95989a";
Chart.defaults.global.tooltips.bodyAlign = "left";
Chart.defaults.global.tooltips.titleFontSize = 0;
Chart.defaults.global.tooltips.titleMarginBottom = 0;
Chart.defaults.global.tooltips.footerMarginTop = 0;
Chart.defaults.global.tooltips.cornerRadius = 12;
Chart.defaults.global.tooltips.caretSize = 10;
Chart.defaults.global.tooltips.xPadding = 20;
Chart.defaults.global.tooltips.yPadding = 10;
Chart.defaults.scale.gridLines.color = 'white';
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [" ", "", "", "", "", "", "", "", "", " "],
datasets: [{
label: ',
data: [100,100,100,100,0,100,100,100,100,100],
fill: false,
borderWidth: 1,
borderColor: "#2f75c1",
borderCapSytle: "round",
pointBorderColor: "#2f75c1",
pointBackgroundColor: "#2f75c1",
pointBorderWidth: 5,
pointHoverRadius: 10,
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
display: false
},
scaleLabel: {
display: false
},
scaleLkneColor: 'white',
ticks: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
},
scaleLabel: {
display: false
},
// ticks: {
// display: false
// }
}]
}
}
});