Highcharts - Change color of hover points

Question

So, I've bene looking at the highcharts API, for an option to change the color of the point background color, when hovering the chart.

This is my current chart: JSFiddle Example

And the code:

$(function () {
            $('#main-chart').highcharts({
                chart: {
                    type: 'area'
                },
                plotBorderColor: '#000000',
                plotBackgroundColor: '#000000',
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    allowDecimals: false,
                    labels: {
                        formatter: function () {
                            return this.value; // clean, unformatted number for year
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: 'Number of Clicks'
                    },
                    labels: {
                        formatter: function () {
                            return this.value / 1000 + 'k';
                        }
                    }
                },
                tooltip: {
                    pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
                },
                plotOptions: {
                    area: {
                        pointStart: 1940,
                        marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'USA',
                    lineColor: '#4adefa',
                    color: '#f1faf7',
                    data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]


                }, {
                    name: 'USSR/Russia',
                    lineColor: '#44d99f',
                    color: '#f1faf7',
                    data: [215, 125, 450, 120, 150, 200, 426, 660, 869, 1060, 900, 340, 429]
                }]
            });
        });

When hovering the chart, the "point marker" is a round gray circle - I want to change that to be a round circle with a white background and green border.

Is this possible?

Answer 1

Different Marker Color for Hover Pointer,

 data: [
                         { name: 'Point 1',color: '#4adefa', y: 251 }, 
                        { name: 'Point 2',color: '#000000', y: 122 },
                        { name: 'Point 3',color: '#A25429', y: 511 },
                        { name: 'Point 4',color: '#AA1111', y: 524 },
                        { name: 'Point 5',color: '#DF2500', y: 291 },
                        { name: 'Point 6',color: '#007ACF', y: 342 },
                        { name: 'Point 7',color: '#ECD66E', y: 110 },

                       ]

See fiddle here:http://jsfiddle.net/UI_Designer/gwdufurk/5/

Answer 2

You can add this to your plotOptions if you want the style of the points to be the same for every series.

              marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                fillColor: 'white',
                                lineColor: 'green',
                                lineWidth: 0
                            }
                        }
                    }

A working fiddle can be found here: http://jsfiddle.net/gwdufurk/3/

If you want to have the styles of the points to be different for each series you can set the marker.states.hover attributes for each series like so:

 series: [{
                name: 'USA',
                lineColor: '#4adefa',
                color: '#f1faf7',
                marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                fillColor: 'white',
                                lineColor: 'green',
                                lineWidth: 0
                            }
                        }
                    },
                data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
               // other series here.

            }

See fiddle here http://jsfiddle.net/gwdufurk/4/.

Answer 3

You can change the color of the markers like so:

...  
marker: {
    fillColor: 'green',
    ...

Edit: Fiddle with red markers