Reputation: 1003
The Highcharts library has a default array of colors:
http://api.highcharts.com/highcharts/colors
colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
which at "initialization" can be set to whatever you want.
My question: "after initialization", how to update the color array and "redraw" the chart?
For a single series, I found I can update the color with some sophistication ...
chart.series[0].update({
color: {
radialGradient: { cx: .5, cy: .6, r: .25 },
stops: [
[0, '#ffffff'],
[1, '#73ff96']
]
}
}, true);
But the bubble chart has a "default" border and "fill" that I can't seem to duplicate.
http://www.highcharts.com/docs/chart-design-and-style/colors
So the fundamental question may be: what is the default fill/opacity setup that bubble charts using internally with the "colors" array to build a specific series "color" attribute? And what is the "color" attribute?
Clarification follows: Based on the @morganfree answer. Applied to a single point, the series information was right on.
Below, the // unselect reverts back to the correct color, but when applied to a single point the color goes gray, with params, not to this red "highlight"
// unselect points
var points = chart.getSelectedPoints();
if (points.length > 0) {
Highcharts.each(points, function (point) {
point.select(false);
point.update({color: '#7cb5ec'}); // default color
});
}
// select current point
if(idx != -1)
{
chart.series[0].data[idx].select(true);
chart.series[0].data[idx].update({color: '#f45b5b'},true); // highlight color
}
http://fiddle.jshell.net/mshaffer/h39e2z0o/
Note the select element goes gray, based, I believe on the default parameters within
plotOptions: {
series: {
allowPointSelect: true
},
for the "marker"
http://api.highcharts.com/highcharts/plotOptions.series.marker
Does the "marker" allow for such dynamic recoloring?
Also note, if I randomize an element, then change the series color, the "randomized" element within the series does not change back to the correct color.
It appears the events for "bubble" and "series" within plotOptions are conflicting? click vs select?
Upvotes: 0
Views: 1034
Reputation: 12472
If you want to change colors of the series after initialisation, then you have to loop through the series and update its color - the default 'feel' of the color will be preserved.
chart.series.forEach(function (series, i) {
series.update({
color: colors[colors.length - i - 1]
}, false, false);
});
chart.redraw();
example: http://fiddle.jshell.net/mp27yb75/2/
The color for a specific bubble is inherited from the series color but if you specify the color for the point, the default 'feel', again, will be preserved.
chart.series[0].data[0].update({
color: '#f45b5b'
});
example: http://fiddle.jshell.net/mp27yb75/3/
For a bubble, fill's opacity is set to 0.5, stroke's opacity is 1, stroke and fill colors are the same.
Upvotes: 1
Reputation: 222722
You can do this way,
chart.series[0].data[0].update({
y: 150,
marker: {
fillColor: 'red',
states: {
hover: {
fillColor: 'red',
lineColor: 'red'
}
}
}
});
Upvotes: 0