CODEWITHSUNDEEP
highcharts
luck ju
luck ju

Reputation: 13

highcharts hover with negativeColor property gives wrong color

I have a series that I'm plotting as type 'column' and it can be both negative or postive. I want the positive to be green and the negative to be red so I added the following function.

function redrawColumns(chart){
        $(chart.series[0].data).each(function(i,e){
            if (e.y < 0 ){
                e.graphic.attr({fill:'rgba(128,0,0,1)'});
            }

        });

right above my chart declaration

var chart = $('#container').highcharts({
        chart: {

            renderTo: 'container',
        alignTicks: false,
        events: {
        ....

with the original series declared later on in the usual format

series: [
            type: 'column',
            name: 'Sentiment',
            data: senti,        
            pointWidth: .3,
            //color: 'green',
            color: 'rgba(34,139,34,1)',
            threshold: 0,
            shadow: false,
            borderWidth: 0,

I have an option such that whenever I scroll over any part of the bar graph, it displays the value but the problem is any bar that I scroll over turns to green and stays green. How can I make sure the hovering doesn't change the color, ie persists through any kind of mouse movement. Maybe I should move that function? Also this is being refreshed and plotted once a minute based on data dump to a text file.

Here is my marker, don't think this makes any difference. 

//marker hover option for the sentiment chart
     column: {
        cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            location.href = 'https://www.randomsite.com';
                        }
                    }
                },

                states: {
                    hover: {
            enabled: true,
                        lineWidth: .6,
                        halo: {
                            size: 2,
                            attributes: {
                                fill: Highcharts.getOptions().colors[2],
                                'stroke-width': 1,
                                stroke: Highcharts.getOptions().colors[1]
                            }
                        }

                    }
                }
            },

Upvotes: 1

Views: 720

Answers (1)

Jean-Paul
Jean-Paul

Reputation: 21180

You shouldn't (don't have to) specify a function for negative values.

Rather tackle the problem by using Highchart's negativeColor property:

series: [
            type: 'column',
            color: 'rgba(34,139,34,1)',
            negativeColor: 'rgba(128,0,0,1)',
            ...

For reference, take a look at this demo from highchart's demo examples.

Now we still have the problem with the hovering color. This is a known bug.

But this bug was solved on 5 December 2014. So if you use the latest version of Highcharts, it should work.

Upvotes: 0

Related Questions