Setting background color of rangeSelector container in Highstock/Highcharts

Question

I have a Highcharts chart and I need to modify the rangeSelector section. I've been able to format some of the buttons and input boxes, but I'd like to specify the background color of the entire range selection area . Here's an image of the area I'm talking about (red outline).

Additionally, here's a JSFiddle for that particular chart.

As far as I can tell, there are no options that would allow me to select that section directly listed in the documentation .

I've also tried making a div and positioning it absolutely over the range selector, and then elevating the elements inside the range selector with the Highcharts zIndex attribute, but that doesn't appear to work.

Answer 1

You can use Highcharts.SVGRenderer class to render a rect element, which will be a background for the rangeSelector :

chart: {
    events: {
        load: function() {
            var rangSel = this.rangeSelector.group.getBBox();

            this.renderer.rect(
                rangSel.x,
                rangSel.y,
                rangSel.width,
                rangSel.height
            ).attr({
                fill: 'red'
            }).add();
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/kpbxya8s/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect

Answer 2

Found a good workaround in case anyone runs into this issue as well. Set the chart's overall backgroundColor to a linear gradient with three stops (the first two are your initial color). Here's an example where the top bar needs to be 54px tall.

backgroundColor: {
  linearGradient: [0, 0, 0, 54, 0, 54],
  stops: [
    [0, '#707070'],
    [1, '#707070'],
    [2, '#e2e2e2']
  ]
},