chartjs / chartjs-plugin-annotation

Annotation plugin for Chart.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

label annotation not showing

EmanuelOcampo opened this issue · comments

const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: "bottom" as const,
},
annotation: {
annotations: {
point1: {
type: 'point',
x: lineChartData?.maxSolar?.ts,
y: lineChartData?.maxSolar?.m_s,
backgroundColor: 'rgba(0, 255, 8, 0.25)'
}
}
}
},
scales: {
y: {
ticks: {
font: {
size: 14,
},
callback: function(value: any) {
return value + ' kWh';
}
},
stacked: true,
},
x:{
ticks: {
font: {
size: 14,
},

    },
  },
},

};

Screenshot 2024-03-21 at 7 58 08 PM

@EmanuelOcampo what I can see a mistake is that you are setting x and y options to point annotation which are wrong, they don't exist. Use xValue and yValue.

See doc: https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/types/point.html#point-annotation-specific-options

Nevertheless, a point should be shown in the center of chart area anyway, this makes me think that the plugin is not registered.

See https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/integration.html