# Create a stacked line chart with Charts js v2

**URL:** https://discourse.nodered.org/t/create-a-stacked-line-chart-with-charts-js-v2/99414
**Category:** Dashboard
**Created:** [16 October 2025 07:27 UTC](https://discourse.nodered.org/t/create-a-stacked-line-chart-with-charts-js-v2/99414 "2025-10-16T07:27:04Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Sido1](https://avatars.discourse-cdn.com/v4/letter/s/ee7513/32.png) [@Sido1](https://discourse.nodered.org/u/Sido1)
#### Post date: [16 October 2025 07:27 UTC](https://discourse.nodered.org/t/create-a-stacked-line-chart-with-charts-js-v2/99414/1 "2025-10-16T07:27:05Z")

</div>

Hi there  
I tried to create a stacked line chart with Charts v2 but I always get an overlaying one. For a bar chart it worked, so I am a bit confused. Is it not possible at all?  
The last function before ui\_template sends:

````auto
msg.payload = {
    labels: history.labels,
    datasets: Object.entries(history.datasets).map(([key, data]) => {
        return {
            label: labelNames[key] || key,
            data,
            backgroundColor: colors[key][0].replace('0.8', '0.6'),
            borderColor: colors[key][1],
            fill:"origin",
            stack: "combined"
        };
    })
};```

````

Then the template does:

```auto
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>

<div style="width: 100%; height: 400px;">
  <canvas id="stackedAreaChart" style="width:100%; height:400px;"></canvas>
<script>
(function(scope) {
  scope.$watch('msg.payload', function(data) {
    if (!data) return;

    const ctx = document.getElementById('stackedAreaChart').getContext('2d');

    if (scope.chart) {
      scope.chart.destroy();
    }

    scope.chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.labels,
        datasets: data.datasets
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false }
        },
        scales: {
          x: {
            type: 'time',
            time: {
              unit: 'day',
              tooltipFormat: 'eeee, HH:mm',
              displayFormats: {
                day: 'eeee',
                hour: 'HH:mm'
              }
            },
            ticks: {
              autoSkip: true,
              maxTicksLimit: 7,
              color: "#000"
            },
            stacked: true
          },
          y: {
            stacked: true,
            beginAtZero: true,
            ticks: { color: "#000" }
          }
        },
        elements: {
          line: { tension: 0.4 },
          point: { radius: 0 }
        }
      }
    });
  });
})(scope);
</script>

```

Again this works - I get a nice plot but not a stacked one

Thanks for your help!

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [15 November 2025 07:27 UTC](https://discourse.nodered.org/t/create-a-stacked-line-chart-with-charts-js-v2/99414/2 "2025-11-15T07:27:06Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.