score:3

you can set the stacked property on bar datasets, so lines don't stack. try something like this:

 data: {
      datasets: [{
        label: 'line 1',
        data: [],
        backgroundcolor: '#3788d8cc',
        bordercolor: '#3788d8cc',
        fill: false
      }, {
        label: 'stacked bar 1',
        data: [],
        backgroundcolor: '#e51c23',
        bordercolor: '#e51c23',
        type: 'bar',
        stack: 'bar-stacked'
      }, {
        label: 'line 2',
        data: [],
        backgroundcolor: '#ff9800',
        bordercolor: '#ff9800',
        fill: false
      },
      {
        label: 'stacked bar 2',
        data: [],
        type: 'bar',
        backgroundcolor: '#3f51b5',
        bordercolor: '#3f51b5',
        stack: 'bar-stacked'
      }],
      labels: [],
    },
    options: {
      maintainaspectratio: false,
      legend: {
        display: true
      },
      scales: {
        xaxes: [{
          display: true
        }],
        yaxes: [{
          display: true
        }]
      }
    }

score:4

another answer here - you can set a 'stack' identifier for the data you want to be cumulative (i.e. just the bars), and turn off 'fill' on the line graphs to draw just as a line rather than mountain range

chart.js remove stacking

score:21

you can get this functionality with a combination of setting a different yaxisid (e.g. yaxisid: "bar-stacked") to each of your datasets, and then adding a second options.scales.yaxes object. so you would have this as a dataset:

{
  label: 'promoters',
  backgroundcolor: "#aad700",
  yaxisid: "bar-stacked",
  data: [
    50, 44, 52, 62, 48, 58, 59, 50, 51, 52, 53, 54
  ]
}

and then you would add an additional yaxes (the first one will be the collection of your line datasets [no yaxisid in the example below], the second will be all of the bars you want stacked):

yaxes: [{
  stacked: false,
  ticks: {
    beginatzero: true,
    min: 0,
    max: 100
  }
}, {
  id: "bar-stacked",
  stacked: true,
  display: false, //optional if both yaxes use the same scale
  ticks: {
    beginatzero: true,
    min: 0,
    max: 100
  },
  type: 'linear'
}]

full example is as follows:

<!doctype html>
<html>

<head>
  <title>stacked bar chart</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.1.3/chart.bundle.js"></script>
  <style>
    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
  </style>
</head>

<body>
  <div style="width: 100%">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var barchartdata = {
      labels: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],
      datasets: [{
        data: [
          50, 30, 60, 70, 80, 90, 95, 70, 90, 20, 60, 95
        ],
        type: 'line',
        label: 'this year',
        fill: false,
        backgroundcolor: "#fff",
        bordercolor: "#70cbf4",
        bordercapstyle: 'butt',
        borderdash: [],
        borderdashoffset: 0.0,
        borderjoinstyle: 'miter',
        linetension: 0.3,
        pointbackgroundcolor: "#fff",
        pointbordercolor: "#70cbf4",
        pointborderwidth: 1,
        pointhoverradius: 5,
        pointhoverbackgroundcolor: "#70cbf4",
        pointhoverbordercolor: "#70cbf4",
        pointhoverborderwidth: 2,
        pointradius: 4,
        pointhitradius: 10
      }, {
        data: [
          25, 40, 30, 70, 60, 50, 40, 70, 40, 80, 30, 90
        ],
        type: 'line',
        label: 'last year',
        fill: false,
        backgroundcolor: "#fff",
        bordercolor: "#737373",
        bordercapstyle: 'butt',
        borderdash: [10, 10],
        borderdashoffset: 0.0,
        borderjoinstyle: 'miter',
        linetension: .3,
        pointbackgroundcolor: "#fff",
        pointbordercolor: "#737373",
        pointborderwidth: 1,
        pointhoverradius: 5,
        pointhoverbackgroundcolor: "#737373",
        pointhoverbordercolor: "#737373",
        pointhoverborderwidth: 2,
        pointradius: 4,
        pointhitradius: 10
      }, {
        label: 'promoters',
        backgroundcolor: "#aad700",
        yaxisid: "bar-y-axis",
        data: [
          50, 44, 52, 62, 48, 58, 59, 50, 51, 52, 53, 54
        ]
      }, {
        label: 'passives',
        backgroundcolor: "#ffe100",
        yaxisid: "bar-y-axis",
        data: [
          20, 21, 24, 25, 26, 17, 28, 19, 20, 11, 22, 33
        ]
      }, {
        label: 'detractors',
        backgroundcolor: "#ef0000",
        yaxisid: "bar-y-axis",
        data: [
          30, 35, 24, 13, 26, 25, 13, 31, 29, 37, 25, 13
        ]
      }]
    };

    window.onload = function() {
      var ctx = document.getelementbyid("canvas").getcontext("2d");
      window.mybar = new chart(ctx, {
        type: 'bar',
        data: barchartdata,
        options: {
          title: {
            display: true,
            text: "chart.js bar chart - stacked"
          },
          tooltips: {
            mode: 'label'
          },
          responsive: true,
          scales: {
            xaxes: [{
              stacked: true,
            }],
            yaxes: [{
              stacked: false,
              ticks: {
                beginatzero: true,
                min: 0,
                max: 100
              }
            }, {
              id: "bar-y-axis",
              stacked: true,
              display: false, //optional
              ticks: {
                beginatzero: true,
                min: 0,
                max: 100
              },
              type: 'linear'
            }]
          }
        }
      });
    };
  </script>
</body>

</html>


Related Query

More Query from same tag