Setting range of axes on multiseries chart based on dataPoint range on legend click - CanvasJS JavaScript Charts
Setting range of axes on multiseries chart based on dataPoint range on legend click - 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: "Click on legend items to hide/unhide dataseries"
},
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: [{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 75 },
{ x: 20, y: 59 },
{ x: 30, y: 57 },
{ x: 40, y: 62 },
{ x: 50, y: 72 },
{ x: 60, y: 44 },
{ x: 70, y: 55 },
{ x: 80, y: 78 },
{ x: 90, y: 60 }
]
}, {
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35 },
{ x: 30,y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44 }
]
}
]
});
chart.render();
chart.axisY[0].set("minimum", chart.axisY[0].get("minimum"));
chart.axisY[0].set("maximum", chart.axisY[0].get("maximum"));
chart.axisX[0].set("minimum", chart.axisX[0].get("minimum"));
chart.axisX[0].set("maximum", chart.axisX[0].get("maximum"));