[Chartjs]-ChartJS using multiple Y axes

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

Leave a comment