3👍
✅
You could achieve this using the following chartjs plugin …
Chart.plugins.register({
beforeDraw: function(c) {
var canvas_id = c.chart.canvas.id;
if (canvas_id === 'myChart') {
if (c.data.datasets[0]._meta[0].hidden) {
c.options.scales.yAxes[1].display = false;
} else c.options.scales.yAxes[1].display = true;
if (c.data.datasets[1]._meta[0].hidden) {
c.options.scales.yAxes[0].display = false;
} else c.options.scales.yAxes[0].display = true;
}
}
});
ᴅᴇᴍᴏ
Chart.plugins.register({
beforeDraw: function(c) {
var canvas_id = c.chart.canvas.id;
if (canvas_id === 'myChart') {
if (c.data.datasets[0]._meta[0].hidden) {
c.options.scales.yAxes[1].display = false;
} else c.options.scales.yAxes[1].display = true;
if (c.data.datasets[1]._meta[0].hidden) {
c.options.scales.yAxes[0].display = false;
} else c.options.scales.yAxes[0].display = true;
}
}
});
var canvas = document.getElementById('myChart');
var warm = [0, 0, 0, 0, 25, 25, 25, 25, 25, 25];
var volume = [98, 12, 0, 7, 7, 7, 7, 78, 62, 62];
var data = {
labels: ["23.05.2017 15:34:48", "23.05.2017 15:35:02", "23.05.2017 15:35:14", "23.05.2017 15:35:28", "23.05.2017 15:59:35", "23.05.2017 16:00:11", "23.05.2017 16:07:22", "23.05.2017 16:38:04", "23.05.2017 16:38:43", "23.05.2017 16:57:48"],
datasets: [{
fill: false,
label: 'Heat',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: "y-axis-1",
data: warm,
backgroundColor: "rgba(255,153,0,0.4)"
}, {
fill: false,
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: "y-axis-0",
label: 'Mass',
data: volume,
backgroundColor: "rgba(153,255,51,0.4)"
}]
};
var option = {
maintainAspectRatio: false,
responsive: true,
bezierCurveTension: 0,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 3,
fontSize: 10
}
}],
yAxes: [{
position: "left",
"id": "y-axis-0",
display: true,
ticks: {
steps: 10,
stepValue: 5,
//max: 100,
callback: (label, index, labels) => {
return label + "%";
}
}
}, {
position: "right",
"id": "y-axis-1",
display: true,
ticks: {
steps: 10,
stepValue: 5,
//max: 100,
callback: (label, index, labels) => {
return label + " c";
}
}
}]
}
};
var myLineChart = Chart.Line(canvas, {
data: data,
options: option
});
function adddata() {
myLineChart.data.datasets[0].data[7] = 50;
myLineChart.data.labels[7] = "test add";
myLineChart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
ChartJS v2.5.0
Source:stackexchange.com