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:
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:
<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!