ChartJS using multiple Y axes

Question

I've created a line chart with two datasets, each one its own Y scale&axis using Chart.js.my datasets and options'code is like below.

datasets: [{ fill:false,
     label: 'Heat', 
     yAxisID: "y-axis-1", 
     data: warm,
      }, 
    { fill:false, 
      yAxisID: "y-axis-0", 
      label:'Mass',  
      data:volume, 
     ]
   options:{
     scales: {
     yAxes: [{ position: "left",
     "id": "y-axis-0", 
     display: true, 
     ticks: { steps: 10, 
     stepValue: 5,
     callback:(label,index,labels)=>{ return label + "%"; } } 
},
 { position: "right", 
    "id": "y-axis-1", 
    display: true, 
    ticks: { steps: 10,
    stepValue: 5,
    callback:(label,index,labels)=>{ return label + " c"; } } }] }
}

it is looking like the folowing image at the moment.

when I toggle Mass label,the YAxes on the left is still appearing.I want to hide it if I toggle the labels.can you please guide me to solve this problem?

Answer 1

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}