Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

ChartJs supports chart annotations / notes

Open Dennayz opened this issue 1 year ago • 6 comments

Feature Proposal

Hello! I was wondering if ChartJs have any supported features to create chart annotations / notes where a user can click over a data point on a chart and get an additional popup to add a specific note for that data point. Here is a link to what I'm trying to acheive! https://dtdocs.sisense.com/article/chart-annotations Thanks!

Possible Implementation

Does this have something to do with another tooltip? I'm not sure.

Dennayz avatar Jul 22 '22 20:07 Dennayz

This is not possible with chart.js itself, you can use the annotation plugin to add annotations, you will need to make the modal to input the values yourself

https://www.chartjs.org/chartjs-plugin-annotation/latest/

LeeLenaleee avatar Jul 22 '22 22:07 LeeLenaleee

This is not possible with chart.js itself, you can use the annotation plugin to add annotations, you will need to make the modal to input the values yourself

https://www.chartjs.org/chartjs-plugin-annotation/latest/

Thanks! I looked into the plugin library and was wondering if this can actually help with my case where I want to build popup notes associated with the specific data point clicked on from a chart.

Dennayz avatar Jul 22 '22 22:07 Dennayz

I don't know how far you can get to match it to the screenshots you want but if you want a 100% match you might have to write your own custom plugin

LeeLenaleee avatar Jul 22 '22 22:07 LeeLenaleee

I think the datalabels plugin is close to what you want

etimberg avatar Jul 24 '22 20:07 etimberg

@etimberg I have used the datalabels plugin, but not sure how I can make it exactly how I want which is clicking on a data point on a chart and then having a pop up come out, and me entering a note, and saving it to the data point.

Dennayz avatar Jul 24 '22 20:07 Dennayz

ah, that will require a custom plugin for the form side of things.

etimberg avatar Jul 24 '22 20:07 etimberg