In a basic Highcharts columnrange chart, how do I assign a color (blue) to the low values and a different color (red) to the high values?
The chart I am referring to is this one: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/
So for January the '-9.7' should be blue and the '9.4' should be red.
In a different example, I have tried this:
series: [{
name: 'Temperatures',
data: [
{low: 2, high: 6, color: 'green'},
{low: 1, high: 9, color: 'yellow'},
{low: -3, dataLabels: {color: 'red'}, high: 5, color: 'blue'},
{low: 0, high: 7, color: 'orange'}
],
color: '#b9deea',
borderColor: '#92cbde',
borderRadius: 4
}]
But that changes the data label colour for both the low AND high value for the blue column to red.
Thanks in advance.
Baobab
In the formatter callback you can wrap text inside span
and style it properly.
formatter: function () {
var color = this.y === this.point.high ? 'red' : 'blue';
return '<span style="color:' + color + '">' + this.y + '°C</span>';
}
example: http://jsfiddle.net/6ofbr32b/1/
You have to split a point into two points - which will represent its negative and positive values, set threshold to 0 and negativeColor. Then adjust tooltip and data labels.
Splitting can be achieved in that way;
//plotOptions.columnRange
negativeColor: 'red',
threshold: 0,
borderWidth: 0,
//series
keys: ['x', 'low', 'high', 'part'],
data: [
[0,-9.7, 0, 'neg'],
[0,0,9.4, 'pos'],
[1,-8.7, 0, 'neg'],
[1, 0, 6.5, 'pos'],
[2,-3.5, 0, 'neg'],
[2, 0, 9.4, 'pos'],
[3,0.0, 22.6],
[4,2.9, 29.5],
]
'part' is a helper which will be useful for adjusting tooltip and data labels.
Data labels so only one edge will be displayed if the points is split
dataLabels: {
enabled: true,
formatter: function() {
if (this.point.part === 'neg' && this.y === this.point.low) {
return this.y + '°C';
} else if (this.point.part === 'pos' && this.point.high === this.y) {
return this.y + '°C';
} else if (!this.point.part) {
return this.y + '°C';
}
return '';
}
}
and tooltip
tooltip: {
pointFormatter: function () {
var points = this.series.points,
low = this.low,
high = this.high;
if (this.part === 'neg') {
low = this.low;
high = points[this.index + 1].high;
} else if (this.part === 'pos') {
low = points[this.index - 1].low;
high = this.high;
}
return '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + low + '°C</b> - <b>' + high + '°C</b><br/>';
}
},
example: http://jsfiddle.net/xdg67kuo/3/
It is also possible to achieve the desired effect with a stacked column chart: example
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.