chart.js 4.4.2 chartjs-plugin-datalabels I am aiming to achieve this effect
const chartCtr = document.querySelector('#temp-chart1') as HTMLCanvasElement;
new Chart(chartCtr, {
type: 'line',
plugins: [ChartDataLabels],
options: {
layout: {
padding: {
bottom: 10.15,
},
},
maintainAspectRatio: false,
animation: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
adapters: {
date: {
locale: enUS,
},
},
type: 'time',
ticks: {
stepSize: 3,
major: {
enabled: true,
},
},
time: {
unit: 'hour',
tooltipFormat: 'HH:mm',
},
position: 'top',
},
yTemp: {
ticks: {
display: false,
},
grid: {
drawTicks: false,
},
border: {
display: false,
},
},
yPop: {
display: false,
max: getMaxValueWithPadding(),
},
yLev: {
display: false,
},
},
},
data: {
labels: forecast.map((row) => row.date),
datasets: [
{
label: 'temp every 3 hrs',
data: forecast.map((row) => row.temp),
yAxisID: 'yTemp',
datalabels: {
display: false,
},
},
{
label: 'probability of preciptation',
data: forecast.map((row) => row.pop),
yAxisID: 'yPop',
type: 'bar',
datalabels: {
anchor: 'end',
align: 'end',
font: {
weight: 'bold',
},
formatter: (value) => `${((value as number) * 100).toFixed()}%`,
},
},
{
label: '3h rain',
yAxisID: 'yLev',
data: forecast.map((row) => {
const sum = (row.rain ?? 0) + (row.snow ?? 0);
if (sum) return sum;
else return '';
}),
hidden: true,
},
],
},
});
I am trying to display the values of the '3h rain' dataset on each bar. I have successfully used the datalabels plugin to display the values of the 'probability of precipitation' dataset on each bar. How can I achieve the same for '3h rain'?