setting maximum and minimum dynamically - CanvasJS JavaScript Charts
setting maximum and minimum dynamically - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "PERFORMANCES CUMULÉES - NET B EN EUR *",
},
axisX: {
valueFormatString: "MM/YY",
minimum: new Date(2012, 05, 29),
},
data: [{
type: "spline",
showInLegend: true,
markerType: "square", //For square markers
legendText: "FONDS",
lineThickness: 2,
markerSize: 0, //To hide the markers by default
dataPoints: [
{ x: new Date(2012, 05, 29), y: 2 },
{ x: new Date(2014, 05, 30), y: 3 },
{ x: new Date(2014, 11, 15), y: 3 },
{ x: new Date(2016, 05, 30), y: 4 },
{ x: new Date(2017, 07, 03), y: 5}
]
}]
});
var max = chart.options.data[0].dataPoints[0].y;
var min = max;
for (var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
if(max < chart.options.data[0].dataPoints[i].y)
max = chart.options.data[0].dataPoints[i].y;
if(min > chart.options.data[0].dataPoints[i].y)
min = chart.options.data[0].dataPoints[i].y;
}
chart.options.axisY = {
maximum: max,
minimum: min,
labelFormatter: function(e) {
return Math.round(e.value / max * 100) + "%";
}
};
chart.render();