javascriptchartschart.js2

Chart.js - Combo Bar and Line Chart - Remove stacking for line datasets but still keep stacking for Bar datasets


I have a stacked bar chart and two line charts. The second line chart is beeing stacked on top of the first line chart but I don't want this behaviour.

What I've tried is to explicitly set the stack mode on false ,but this option is not beeing executed.

            ...
            type: 'line',
            label: 'lineChart1',
            data: lineData1,
            borderWidth: 1,
            fill: false,
            options: {
              legend: {
                display: false
              },
              scales: {
                    xAxes: [{
                        stacked: false,
                    }],
                    yAxes: [{
                        stacked: false
                    }]
                }
            }
        }
        ...

Solution

  • Here is an example that configures a chart with 2 stacked bars and 2 un-stacked lines. I think the reason why you are getting stacking on your line charts is because you did not set the stacked option in your bars to give them a stack id.

    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
          type: 'line',
          label: 'Dataset 1',
          borderColor: window.chartColors.green,
          borderWidth: 2,
          fill: false,
          data: [5, 3, 4, 10, 8, 9, 2]
        }, {
          type: 'line',
          label: 'Dataset 2',
          borderColor: window.chartColors.orange,
          borderWidth: 2,
          fill: false,
          data: [8, 5, 2, 8, 7, 2, 6]
        }, {
          type: 'bar',
          label: 'Dataset 3',
          backgroundColor: window.chartColors.red,
          stack: 'Stack 0',
          data: [2, 4, 1, 3, 7, 3, 6],
          borderColor: 'white',
          borderWidth: 2
        }, {
          type: 'bar',
          label: 'Dataset 4',
          backgroundColor: window.chartColors.blue,
          stack: 'Stack 0',
          data: [7, 2, 4, 5, 6, 4, 2]
        }]
      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: 'Chart.js Stacked Bar and Unstacked Line Combo Chart'
        },
        tooltips: {
          mode: 'index',
          intersect: true
        },
        scales: {
          xAxes: [{
            stacked: true,
          }]
        }
      }
    });
    

    Here is a codepen example that shows what it looks like.