search

chartjs / chartjs-plugin-annotation

Annotation plugin for Chart.js
MIT License
595 stars 324 forks source link

label annotation not showing #926

Open EmanuelOcampo opened 3 months ago

EmanuelOcampo commented 3 months ago

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
stockiNail commented 3 months ago

@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