This should be pretty simple, but I've pored over the highcharts documentation and can't seem to find an option that specifically addresses the text color (in contrast, there are specific color options for backgrounds, borders, lines, etc.). Then I came across the chart.style option. It seems like it should work -- but doesn't.
In this jsfiddle demo you'll see that I was able to change the font-family, but not the color.
What am I missing?
You can use plotOptions and setting color for each series type. For example if you need changing color dataLabels plotOptions. bar. dataLabels.
Add which colors you want to colors and then set colorByPoint to true . Reference: http://api.highcharts.com/highstock#colors. http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint.
Re: Changing Font There is no one place you can change the fonts for all text, instead change options. title. style. font, options.
use chart. setSize(width, height, doAnimation = true); in your actual resize function to set the height and width dynamically. Set reflow: false in the highcharts-options and of course set height and width explicitly on creation.
check this example, i was able to change labels colours on your jsfiddle. here's whole options parameter:
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'monospace',
color: "#f00"
}
},
title: {
style: {
color: '#F00',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#F00',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
labels: {
style: {
color: '#F00',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
});
almost every option in high charts can have style applied to it, like I have done to the y-axis in this example:
http://jsfiddle.net/h3azu/
I would also recommend going to this page,
http://www.highcharts.com/demo/combo-dual-axes
and clicking "view options" to get an idea of other ways the 'style' option can be used to color text.
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