mshaffer
mshaffer

Reputation: 1003

Highcharts bubble chart with updating default colors

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?

update

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.

update 2

It appears the events for "bubble" and "series" within plotOptions are conflicting? click vs select?

Upvotes: 0

Views: 1034

Answers (2)

morganfree
morganfree

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

Sajeetharan
Sajeetharan

Reputation: 222722

You can do this way,

chart.series[0].data[0].update({
      y: 150,
      marker: {
        fillColor: 'red',
        states: {
          hover: {
            fillColor: 'red',
            lineColor: 'red'
          }
        }
      }
    });

DEMO

Upvotes: 0

Related Questions