[Chartjs]-Chart.js stacked line chart with differently styled sections

by

0👍

✅

I solved it myself by separating the stacked line data into 2 datasets, to plot as separate stacked plots on the same figure/axes (by including the 2 separate datasets in a single chart’s data object).

1👍

@Izzi (from comment) here is example:

enter image description here

Link with examle: https://www.chartjs.org/docs/latest/samples/area/line-boundaries.html

Paste this config into editor on the website linked above:

data

const data = {
  labels: generateLabels(),
  datasets: [
    {
      label: 'Data A',
      data: [40.96,89.06,65.46,45.46,89.55,54.52,71.24,89.1],
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.CHART_COLORS.red,
      // look at this setting
      fill: 'origin'
    },
    {
      label: 'Data B',
      data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.CHART_COLORS.blue,
      fill: 'origin'
    },
    {
      label: 'Data C',
      data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
      borderColor: Utils.CHART_COLORS.green,
      backgroundColor: Utils.CHART_COLORS.green,
      fill: 'origin'
    }
  ]
};

config

const config = {
  type: 'line',
  data: data,
  options: {
    scales: {
      y: {
        // look at this setting
        stacked: true,
      }
    },
    plugins: {
      filler: {
        propagate: false,
      },
      title: {
        display: true,
        text: (ctx) => 'Fill: ' + ctx.chart.data.datasets[0].fill
      }
    },
    interaction: {
      intersect: false,
    }
  },
};

Leave a comment