[Chartjs]-Adding line over stacked line chart with ChartJS

by

2👍

✅

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.

Leave a comment