Showing axisY Range even when dataSeries is hidden - CanvasJS JavaScript Charts
Showing axisY Range even when dataSeries is hidden - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Car Parts Sold in Different States"
},
subtitles: [{
text: "Click Legend to Hide or Unhide Data Series"
}],
axisX: {
title: "States"
},
axisY: {
title: "Oil Filter - Units",
titleFontColor: "#4F81BC",
lineColor: "#4F81BC",
labelFontColor: "#4F81BC",
tickColor: "#4F81BC"
},
axisY2: {
title: "Clutch - Units",
titleFontColor: "#C0504E",
lineColor: "#C0504E",
labelFontColor: "#C0504E",
tickColor: "#C0504E"
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [{
type: "column",
name: "Oil Filter",
showInLegend: true,
yValueFormatString: "#,##0.# Units",
dataPoints: [
{ label: "New Jersey", y: 19034.5 },
{ label: "Texas", y: 20015 },
{ label: "Oregon", y: 25342 },
{ label: "Montana", y: 20088 },
{ label: "Massachusetts", y: 28234 }
]
},{
type: "column",
name: "Clutch",
axisYType: "secondary",
showInLegend: true,
yValueFormatString: "#,##0.# Units",
dataPoints: [
{ label: "New Jersey", y: 210.5 },
{ label: "Texas", y: 135 },
{ label: "Oregon", y: 425 },
{ label: "Montana", y: 130 },
{ label: "Massachusetts", y: 528 }
]
}]
});
chart.render();
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
if(!chart.options.axisY)
chart.options.axisY = {};
if(!chart.options.axisY2)
chart.options.axisY2 = {};
chart.options.axisY.minimum = e.chart.axisY[0].minimum;
chart.options.axisY.maximum = e.chart.axisY[0].maximum;
chart.options.axisY.interval = e.chart.axisY[0].interval;
chart.options.axisY2.minimum = e.chart.axisY2[0].minimum;
chart.options.axisY2.maximum = e.chart.axisY2[0].maximum;
...