CODEWITHSUNDEEP
javascriptchartschart.js
ervazu
ervazu

Reputation: 362

Chart.js - Give specific circles a background color in a bubble chart

I'm using the bubble chart graph from the chart.js library. My dataset contains three categories and I would like to give each of these categories a corresponding color in the graph. This could be done rather easily by just adding three datasets to the datasets array, but everything is in one dataset and splitting them out client-side kills performance.

So I added the category to the data. Made a for loop and changed the corresponding nodes to another background color, however I can't seem to find the right property. I have been using:

spinozaChart.chart.config.data.datasets[0]._meta[0].data[i]._model.backgroundColor = "green"; and spinozaChart.chart.config.data.datasets[0]._meta[0].data[i]._view.backgroundColor = "green";

This does change the nodes to the right color. However after one second they reset to the original background color... What would be the right property to target?

Upvotes: 0

Views: 1978

Answers (1)

jordanwillis
jordanwillis

Reputation: 10705

You actually don't even need to try and set the colors inside the chart.js object itself. The background dataset property accepts either a single color value, or an array of color values (where the index in the color array maps to the index in the data array).

See this documented in the API here.

property: backgroundColor, type: Color or Array

Here is an example showing this in a bar chart (only focus on the usage of the array in the backgroundColor property. It's the exact same concept for a bubble chart.

Upvotes: 2

Related Questions