CODEWITHSUNDEEP
chart.jspointscatter
raywright1
raywright1

Reputation: 28

Chart.js scatter/bubble pointstyle custom text

I'm looking for a solution in which custom text is rendered instead of a point for a scatter or bubble diagram using chart.js. For example, if plotting baseball players' batting average vs slugging percentage, I want the player's name to appear centered horizontally and vertically over the underlying x,y coordinate, such as 'MANTLE' or 'RUTH', instead of the typical dot/square/triangle/bubble pointstyles. I noticed a callback function lets me program custom axis labels, but I need to do something similar for the actual point of the graph.

If this is not possible, can you recommend another library that can do this.

Thank you in advance...

Upvotes: 0

Views: 553

Answers (1)

uminder
uminder

Reputation: 26150

chartjs-plugin-datalabels does what you're looking for. The positioning of the labels is largely customizable. A custom label formatter function for example lets you display text other than the data values.

Please take a look at the chartjs-plugin-datalabels samples, especially at Custom Labels.

Keep in mind that this plugin registers itself globally, meaning that once imported, all charts will display labels. In case you want it enabled only for a few charts, you first need to unregister it globally. Then, you can enabled the plugin for specific charts.

Upvotes: 1

Related Questions