dwx586
Posts: 4
Joined: Tue Sep 18, 2018 12:03 am

How to change colors on simple chart

I starting using Highcharts yesterday and after a lot of research I have a question regarding styling charts. The following chart is ideal for my current purpose, but I want to change the background color to black and change the colors of the text and bars. I don't want to use a template because my needs are so simple.

Here's my html code:

<div id="container" style="width:100%; height:200px; background-color: rgb(0, 2, 3)">
<script src="JS\Highcharts_Bar_02.js"></script>
</div>

Here's my jQuery code in Highcharts_Bar_02.js:

$(function () {
var myChart = Highcharts.chart('container', {
chart: {type: 'bar'},
backgroundColor: {'#000000'},
title: {text: 'Chart Title'},
xAxis: {categories: ['Category1<br>Category2']},
yAxis: {title: {text: 'Time in Seconds - Logarithmic Scale'}, type: 'logarithmic'},
series: [{name: 'Category1',data: [3.7]},
{name: 'Category2',data: [5339.31]}]
});

});

If I add backgroundColor: {'#000000'}, right below chart: {type: 'bar'} in the jQuery code above, the chart disappears from the screen completely.

I also tried using a custom theme file, but that made no difference.

How do I change the background color and the colors for text and the bars in the code above?

Thanks very much for any help.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: How to change colors on simple chart

Hi dwx586,

1. The chart disappeared completely because of this piece of code:

Code: Select all

backgroundColor: {'#000000'}
this is a syntax error (you don't have a property name just value).

2. To change the background color of the chart you have to set in the chart.backgroundColor property. Bar colors in the series color property. Check the example with your chart I posted below. More properties you can find in our API reference here: https://api.highcharts.com/highcharts/.

Online example:
http://jsfiddle.net/wchmiel/f78brknc

Api reference:
https://api.highcharts.com/highcharts/c ... roundColor
https://api.highcharts.com/highcharts/series.bar.color
https://api.highcharts.com/highcharts/title.style

Kind regards.
Wojciech Chmiel
Highcharts Developer
dwx586
Posts: 4
Joined: Tue Sep 18, 2018 12:03 am

Re: How to change colors on simple chart

Thank you very much. That works very well. You produce a very good product at Highcharts.
dwx586
Posts: 4
Joined: Tue Sep 18, 2018 12:03 am

Re: How to change colors on simple chart

I have a follow-up question. How can I remove the radio buttons from the button of the chart. When I comment out the following code, the radio button legends disappear but the radio buttons remain:

/*legend: {
style: {
color: '#efefef'
},
itemStyle: {
color: '#efefef'
},
itemHoverStyle: {
color: 'grey'
}
},
exporting: {
buttons: {
contextButton: {
symbolStroke: '#efefef',
theme: {
fill: 'grey'
}
}
}
},*/

I've worked with the other code but nothing I've tried removed the radio buttons themselves. Thanks for any help on this.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: How to change colors on simple chart

dwx586,

To disable legend you have to set legend.enabled = false :

Code: Select all

    legend: {
      enabled: false
    }
Demo:
http://jsfiddle.net/wchmiel/f78brknc/4/

Api reference:
https://api.highcharts.com/highcharts/legend.enabled

Kind regards.
Wojciech Chmiel
Highcharts Developer
dwx586
Posts: 4
Joined: Tue Sep 18, 2018 12:03 am

Re: How to change colors on simple chart

Thank you once again.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: How to change colors on simple chart

You're welcome :wink:
Wojciech Chmiel
Highcharts Developer

Return to “Highcharts Usage”