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.