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():
It is all here: http://jsfiddle.net/S8f86/3/
Is it possible to change the background color of the chart with event?
You can use chart renderer 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();
Highcharts doesn't have an API call to do this. However, you can get at the underlying elements and apply some css styling to them. e.g.
chart.chartBackground.css(
{
color: '#555555',
});
http://jsfiddle.net/xzUcC/
As you are manipulating the dom directly, there is no need to call redraw() on the chart.
As mentioned by another poster, you can do graduated 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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With