Adding line over stacked line chart with ChartJS

Question

I'm trying to recreate this below chart with a stacked option on my background lines

But my attempts were unsuccessful with this image below as result

$(function() {
  var areaChartCanvas = $('#areaChart').get(0).getContext('2d')

  var areaChartData = {
    labels: ['', '', ''],
    datasets: [{
      backgroundColor: 'transparent',
      borderColor: 'black',
      pointRadius: false,
      data: [32, 12, 28],
      type: 'line'
    }, {
      backgroundColor: 'red',
      pointRadius: false,
      data: [20, 20, 20]
    }, {
      backgroundColor: 'orange',
      pointRadius: false,
      data: [40, 40, 40]
    }, {
      backgroundColor: 'cyan',
      pointRadius: false,
      data: [60, 60, 60]
    }]
  }

  var areaChartOptions = {
    maintainAspectRatio: false,
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: true,
        }
      }],
      yAxes: [{
        gridLines: {
          display: true,
        },
        stacked: true
      }]
    }
  }
  var areaChart = new Chart(areaChartCanvas, {
    type: 'line',
    data: areaChartData,
    options: areaChartOptions
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="areaChart" style="height:250px"></canvas>

ideally, I want to be able to create 'AREAS' with different colors that will be stacked according to the interval I pass to it.

e.g:

cyan - 20

orange - 20

red - 20

but currently, I'm doing

cyan - 60

orange - 40

red - 20

Mosh Feu · Accepted Answer · 2019-07-09T16:53:18.377

If I understand you correctly, I thought about different approach and extends the chart with Plugin^[1] (Inspired by https://stackoverflow.com/a/49303362/863110)

Chart.pluginService.register({
  beforeDraw: function (chart, easing) {
    if (chart.config.options.fillColor) {
      var ctx = chart.chart.ctx;
      var chartArea = chart.chartArea;
      ctx.save();
      let delta = 0;
      const chartHeight = chartArea.bottom - chartArea.top;
      const bottomBarHeight = chart.height - chartHeight - chartArea.top;
      chart.config.options.fillColor.map(color => {
        const colorHeight = chartHeight * (color[0] / 100);
        const colorBottom = chartArea.bottom + colorHeight;
        ctx.fillStyle = color[1];

        const x = chartArea.left,
              y = chart.height - bottomBarHeight - colorHeight - delta,
              width = chartArea.right - chartArea.left,
              height = colorHeight;

        delta += height;
        ctx.fillRect(x, y, width, height);
        ctx.restore();
      })
    }
  }
});

var chartData = {
  labels: ['a', 'b', 'c', 'd'],
  datasets: [{
    label: 'value',
    borderColor: 'blue',
    data: [30, 50, 25, 10]
  }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
    scales: {
      yAxes: [{ ticks: { max: 60 } }]
    },
    legend: { display: false },
    fillColor: [
      [20, 'red'],
      [20, 'blue'],
      [20, 'green'],
      [20, 'pink'],
      [20, 'yellow'],
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<canvas id="myChart" height="300" width="500"></canvas>

https://jsbin.com/lisuvuq/2/edit?js,output

^[1] - With Plugin you can custom the chart's behaviour. When you use Plugin you get an API so you can "listen" to life cycle events of the chart (beforeDraw for example) and call your own code. The API calls your function and gives you data about the chart so you can use it in your code.
In this example, we're using the API to (1) Run a code before the chart been drawing (2) Using the data to calculate the areas of the different colors. (3) Draw additional shapes (ctx.fillRect) based on the calculation.

+1 Very nice. What about the background color of the area under the curve? Can it be transparent like in the OP's example? — Boaz, Jul 09 '19 at 14:27
the plugin part kind of lost me but that's exactly the result I wanted to achieve. btw how can I specify the increment interval between the yAxes ticks? — Jonathan, Jul 09 '19 at 14:54
The plugin is only a way to extends the chart functionality. — Mosh Feu, Jul 09 '19 at 15:05
Are you asking about the backgrounds or about the actual ticks? — Mosh Feu, Jul 09 '19 at 15:06
about the ticks, let's say min is 10 max is 50 how do I increment by 1 or 2 or x so I can have 10 12 14 ... — Jonathan, Jul 09 '19 at 15:07
some comment on the plugin part will be much appreciated :) and Also thanks for the help — Jonathan, Jul 09 '19 at 15:22
I added an explanation about the Plugin (but also, the official docs is great). Let me know if something is not clear yet. — Mosh Feu, Jul 09 '19 at 15:50
About the ticks, you're looking for `stepSize`: https://jsbin.com/lisuvuq/3/edit?js,output — Mosh Feu, Jul 09 '19 at 16:52

Adding line over stacked line chart with ChartJS

1 Answers1