[Chartjs]-Can't generate multi-axis combo chart (bar/line) using chart.js 2.7

by

7👍

✅

need to define the overall chart type, at the top level,
then you change one of the types at the dataset level 

  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'bar',  // <-- define overall chart type - top level
    data: {
      labels: x_time,
      datasets: [{
        type:'line',  // <-- define dataset type
        ...

see following working snippet… 

  var x_time  = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30'];
  var y_data1 = ['99.83', '99.86', '99.81', '99.83', '99.72', '99.75'];
  var y_data2 = ['56', '41', '53', '46', '70', '60'];
  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'bar',  // <-- define overall chart type
    data: {
      labels: x_time,
      datasets: [{
        type:'line',
        label: 'Data1',
        fill:false,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: y_data1,
        yAxisID: 'left-axis'
      }, {
        label: 'Data2',
        fill: true,
        backgroundColor: 'rgb(54, 162, 235)',
        borderColor: 'rgb(54, 162, 235)',
        data: y_data2,
        yAxisID: 'right-axis'
      }]
    },
    options: {
      legend: {position:'bottom', usePointStyle:true},
      maintainAspectRatio:false,
      responsive: true,
      title: {display: false},
      tooltips: {mode: 'index', intersect: false},
      hover: {mode: 'nearest', intersect: true},
      scales: {
        xAxes: [{display: true, stacked:true, scaleLabel: {display: false, labelString: 'time'}}],
        yAxes: [{
          type:'linear',
          id:'left-axis',
          display: true,
          position: 'left',
          scaleLabel: {display: true, labelString: '%'}
        },{
          type:'linear',
          id:'right-axis',
          display: true,
          position: 'right',
          stacked:false,
          scaleLabel: {display: true, labelString: '#'},
          gridLines: {drawOnChartArea:false}
        }]
      }
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment