CODEWITHSUNDEEP
javascriptcsshighcharts
RyanY
RyanY

Reputation: 665

Highcharts, how to change hover bg color for series with multiple columns (categories)

In highcharts, there is a background color for all the columns in a series. In all the themes, the hover color is a light blue (155, 200, 255, .2).

I have an example loaded here: http://jsfiddle.net/38pvL4cb/

You can see in the source that Highcharts is creating a path as follows: 

<path fill="none" d="M 678.5 49 L 678.5 326" stroke="rgba(155,200,255,0.2)" stroke-width="274.25" zIndex="2" visibility="hidden"></path>

This element dynamically moves and is shown based on where you hover. I am trying to figure out in the theme how to change it's color, but can't find it in the API reference.

Upvotes: 3

Views: 2412

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

Set xAxis.crosshair.color option: http://jsfiddle.net/38pvL4cb/5/

xAxis: {
    gridLineColor: '#707073',
    labels: {
        style: {
            color: '#fff'
        }
    },
    crosshair: {
        color: "red" // color
    },
    lineColor: '#707073',
    minorGridLineColor: '#505053',
    tickColor: '#707073',
    title: {
        style: {
            color: '#777'

        }
    }
},

That option is not yet in the API.

Upvotes: 3

Goombah
Goombah

Reputation: 2855

Add some CSS targeting the stroke-color like this:

.highcharts-container path
{
    stroke: rgba(100,100,100,.5);
}

Fiddle

Upvotes: 0

Related Questions