Highcharts: how to change text and background colors

Question

I'm new to Highcharts and I'm using a very simple Highcharts bar chart that shows two columns stacked horizontally. I would like to change the background color and the font colors. The documentation shows examples like this:

Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: 'monospace',
            color: "#f00"
        }
        etc . . .

But Highcharts.setOptions doesn't help with the javascript code I am using:

    <div id="container" style="width:100%; height:400px;"></div>

    <script>
    $(function () { 
        var myChart = Highcharts.chart('container', {
            chart: {type: 'bar'},
            title: {text: 'Chart Title'},
            xAxis: {categories: ['Category1<br>Category2']},
            yAxis: {title: {text: 'Value'}
            },

            series: [{name: 'Cat1',data: [4.2]},
            {name: 'Cat2',data: [5691.7]}]
        });
    });
    </script>

If I simply insert a background-color directive (background-color: #000000) below yAxis the graph disappears from the screen.

So my question is how I can change the text and background colors in the Highcharts js code shown above. Thanks.

Core972 Core972 · Accepted Answer · 2018-09-17T06:32:28

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

Highcharts: how to change text and background colors

1 Answers