Can I change the background color on tall charts?

Question

Consider the following situation:

chart.options.chart.backgroundColor= { linearGradient: [0, 0, 0, 400], stops: [ [0, 'rgb(96, 96, 96)'], [1, 'rgb(16, 16, 16)'] ] }; chart.redraw(): 

Everything is here: http://jsfiddle.net/S8f86/3/

Can I change the background color of a chart with an event?

Answer 1

You can use graphic rendering and svg attribiute.

http://jsfiddle.net/S8f86/4/

 this.renderer.button('Change background color', 74, 30, function(){ var gradient = { linearGradient: [0, 0, 0, 400], stops: [ [0, 'rgb(96, 96, 96)'], [1, 'rgb(16, 16, 16)'] ] }; chart.chartBackground.attr({ fill:gradient }); }).add(); 

Answer 2

There is no API call in Highcharts for this. However, you can get the basic elements and apply some CSS style to them. eg.

 chart.chartBackground.css( { color: '#555555', }); 

http://jsfiddle.net/xzUcC/

Since you are manipulating dom directly, there is no need to call redraw () on the chart.

As mentioned in another poster, you can make finished backgrounds as follows:

  var gradient = { linearGradient: [0, 0, 0, 400], stops: [ [0, 'rgb(96, 96, 96)'], [1, 'rgb(16, 16, 16)'] ] }; chart.chartBackground.attr({ fill:gradient });