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

Question

I've been having problems trying to generate a combo bar/line chart using chart.js 2.7.2.

Currently I can render the chart, however the bars are not visible, as shown in the attached picture.

Please note that in the above picture, "Data1" corresponds to the line chart to be plotted on the left Y axis, and "Data2" corresponds to the bar chart to be plotted on the right Y axis.

Also note that the tooltip does show the "Data2" series, however it's not visible on the chart!

Below the javascript code used to generate the chart. It uses a canvas within a simple html document.

    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'), {
    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'
        }, {
            type: 'bar',
            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}
                }]

        }
    }
});

Any help on this would be greatly appreciated.

WhiteHat WhiteHat · Accepted Answer · 2018-07-19T11:33:03

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>

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

1 Answers