Changing Highcharts Background Color

Changing HighCharts background color?

Take a look at the Highcharts API here: https://api.highcharts.com/highcharts/chart.backgroundColor and you will see it's a property of the chart object that can take a solid color:

{
  chart: {
     backgroundColor: '#FCFFC5',
     polar: true,
     type: 'line'
  }
}

Or Gradiant:

{
  chart: {
    backgroundColor: {
       linearGradient: [0, 0, 500, 500],
       stops: [
         [0, 'rgb(255, 255, 255)'],
         [1, 'rgb(200, 200, 255)']
       ]
     },
     polar: true,
     type: 'line'
  }
}

Highcharts: how to change text and background colors

You can't write background-color: #000000 but 'background-color': '#000000' or backgroundColor: '#000000' will works

chart: {
  type: 'bar',
  backgroundColor: '#000000',
  style: {
    fontFamily: 'monospace',
    color: "#f00" // This line won't work. You must set color for each element like title, axis labels ...
  }
}

Fiddle

How to change the background color the chart area in high charts?

If you want to adjust the color for this series, you can use https://api.highcharts.com/highcharts/plotOptions.series.color. So you would just set your series like:

series: [{
    showInLegend: false,
    data: [
        [0, 29.9],
        [1, 71.5],
        [3, 106.4],
        [4, 300.4],
        [5, 400.4],
        [6, 20.4],
        [7, 40.4],
        [8, 120.4],
        [9, 50.4],
        [10, 230.4],
        [11, 110.4],
        [12, 500.4],
    ],
    color: '#ff0000'
}]

See a working demo at https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-color-specific/ from their documentation or https://jsfiddle.net/pkcrt5q2/ for your specific example.

---

Additionally, you can set this as a global option as described at https://api.highcharts.com/highcharts/colors.

Highcharts.setOptions({
    colors: ['#ff0000']
});

Working demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/colors/

Background color to highcharts

You can set the chart background color and the plot area background color separately:

chart: {
  backgroundColor: '#fff',
  plotBackgroundColor: '#fcffc5'
}

Updated fiddle:

• http://jsfiddle.net/jlbriggs/cfrfjuvz/1/

Is it possible to change background color of highcharts?

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();

How to adjust the height and width of background color in Highchart

Here is the option you need:
https://api.highcharts.com/highcharts/chart.plotBackgroundColor?_ga=2.165692350.1083884187.1631103907-1968648769.1625472846
https://codesandbox.io/s/highcharts-react-demo-forked-m0w83

chart: {
    type: 'spline',
    plotBackgroundColor: '#FCFFC5'
}

---

Related Topics