Click here to Skip to main content
14,665,013 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi, I have 2 series in my highchart. Series1 and Series2. Upon hitting a condition, their color will change to red. I have successfully done for the Series2 but somehow I cant change the color os Series1 also. Below are my codes:

$('#myDiv').highcharts({
//logics here
            }, function (chart) {
                var max = 80;

                $.each(chart.series[2].data, function (i, data) {
                    if (data.y < max) {
                        data.graphic.attr({
                            fill: 'RED'
                        });
                        chart.series[0].data[0].update({
                            marker: {
                                fillColor: 'RED'
                            }
                        });
                    }
                });
            });



As shown on the codes, there is no problem in series[2] data/color changing but when I want to change the color for series[1], it would not allow me to.
FYI, the color of the series[1] will change depends on the value of series[2], if series[2] changes color, then series[1] will follow suits.

What I have tried:

chart.series[1].data.graphic.attr({
fill: 'RED'
});
Posted
Updated 30-Jun-16 20:09pm
v3

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

   
Comments
Jamie888 1-Jul-16 2:06am
   
Sir, I have changed the codes into:
chart.series[0].data[i].update({
marker: {
fillColor: 'RED'
}
});
But the color still have not change.
Karthik_Mahalingam 1-Jul-16 2:06am
   
Could you post the full code
Jamie888 1-Jul-16 2:10am
   
Sir, script updated.
Jamie888 1-Jul-16 2:14am
   
Sir, I have found the solution for this. I have removed the:
chart.series[0].data[0].update({
marker: {
fillColor: 'RED'
}
});

into:
chart.series[0].data[i].graphic.attr({ fill: 'RED' });
chart.redraw();
Jamie888 1-Jul-16 2:16am
   
But one thing though, is it a highchart bug that when i hover the point/column with RED, it will get change back to its original color and would not revert back to RED even I hover out the point?
Karthik_Mahalingam 1-Jul-16 2:38am
   
then you will have to write code for hover also
Highcharts Demo - JSFiddle[^]



hover: {
fillColor: 'red',
lineColor: 'red'
}
Jamie888 1-Jul-16 2:42am
   
I have change the codes as without the 'states:':
chart.series[0].data[i].graphic.attr({ fill: 'RED' });
hover: { fillColor: 'RED' };
chart.redraw();

But the result is the same.
Karthik_Mahalingam 1-Jul-16 3:02am
   
ok i will check

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100