I'm using Highchart 3.0.10. I'm setting my colors with the following code:
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors,
function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
This works fine for the first call. After drilldown I have to move the mousepointer over the chart to see some colors. Comming back always one color is lost and replaced by grey. Any ideas?
Thanks a lot!
Related
I'm trying to position custom labels on the outside of a polar chart but can't figure out any way to do it. Please image below for what I'm trying to achieve.
Doesn't have to use the actual series labels but haven't found anything else that can be positioned relative to the actual chart (top level labels can be positioned anywhere but only using absolute left and top).
Have also tried changing the pointPlacement and tickmarkPlacement to "between" which sort of works but it rotates the actual chart so I get a diamond shape instead of a square, the effect I'm after would be more like rotating the labels and leaving the ticks in place.
IN such case custom labels can be positioned relative to grid line group.
Method for drawing the labels:
function drawLabels () {
let labels = this.customLabels,
bbox = this.xAxis[0].gridGroup.getBBox(),
positions = [
[bbox.x + bbox.width / 2, bbox.y],
[bbox.x + bbox.width, bbox.y + bbox.height / 2],
[bbox.x + bbox.width / 2, bbox.y + bbox.height],
[bbox.x, bbox.y + bbox.height / 2]
];
if (!labels) {
labels = this.customLabels = ['lab1', 'lab2', 'lab3', 'lab4'].map(text => this.renderer.label(text, 0, -9999).add().attr({zIndex: 4}));
}
labels.forEach((label, i) => {
label.align({
align: 'center',
verticalAlign: 'middle',
width: label.width,
height: label.height
}, null, {
x: positions[i][0],
y: positions[i][1],
width: 0,
height: 0
});
});
}
Draw labels on load/redraw:
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line',
events: {
load: drawLabels,
redraw: drawLabels
}
},
example: http://jsfiddle.net/d6y1bn31/
I have some values between 0 and 1 that I want to show in a heatmap graphic in highcharts.
The gradient bar should be between 0 and 1, but it is bigger and when I select a cell in the graphic, the color does not match with the color in the gradient bar.
colorAxis: {
min: 0,
max: 1,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
tickPositions: [0, 0.5, 1]
}
http://jsfiddle.net/n13vuaja/
For values between 0 and 150 it works: http://jsfiddle.net/2p2bunnm/
but with values between 0 and 1, even adding the min: 0, max:1, does not match the cursor in the gradient bar with the color.
any idea how to make the gradient bar cursor select the proper color between 0 and 1?
Thanks!
This is a known bug with heatmaps. Currently the workaround seems to be removing the line
this.isXAxis = true;
in the colorAxis init function of the heatmap module (line 93 in heatmap.src.js).
I think it's a bug in highcharts. Their demo if scaled down to small value doesn't match the colorAxis correctly to the legend color (http://jsfiddle.net/3188gubh/).
E.g. 0 is not completely white on the legend, but is on the chart.
Without a code block stackoverflow doesn't let me post a link to jsfiddle :(
On a Highcharts heat map I specify the data in JSON format as follows:
var dataJson = [];
if (model.ActivityData != undefined) {
var index = 0;
if (model.ActivityData.length > 0) {
model.ActivityData.forEach(function(timeLineItem) {
dataJson.push({
x: $scope.getChartDate(timeLineItem.Date.split("T")[0]),
y: timeLineItem.IndicatorMeasure,
value: Math.round(timeLineItem.Amount * 100) / 100,
name: $scope.getChartDate(timeLineItem.Date.split("T")[0]),
});
});
}
}
"Value" is always between 0 and 1. I have added a tooltip showing "value" when hovering over a point.
I specify the colour stops as follows (it is
Orange: 0
White: 0.5
Green: 1
colorAxis: {
stops: [
[0, '#F9A847'],
[0.5, '#ffffff'],
[1, '#b1d4b1']
]
},
I would expect any values below 0.5 to be a shade of orange and any values over 0.5 to be a shade of green. However when the chart is rendered some values above 0.5 are orange.
Does Highcharts use "value" explicitly to set the colour and if so, why is it not respecting the specified colour tops. Or does highcharts adjust the colours by averaging (or something similar) to determine the colours.
Live demo at jsFiddle.
As you can see from the color axis, it extends from 0.4 to 0.7, which means that your middle color stop is actually as 0.55 in terms of axis values. The axis extremes is based on the data values.
So in order to make the axis extend from 0 to 1, like you probably expect, you need to set min and max. View jsFiddle.
colorAxis: {
stops: [
[0, '#F9A847'],
[0.5, '#ffffff'],
[1, '#b1d4b1']
],
min: 0,
max: 1
},
We want to achieve the same as "stops" (like in solid gauge), where we can define values from 0-5 is red, 6 and 7 is yellow, and 8 is green for each column in a Highcharts polar chart.
But stops, that we have tried, is displaying a gradient for the whole column independent of value.. not able to define colours for each column based on specific value.
Only option I see so far is to set colour based on data directly. Example here: http://jsfiddle.net/buzLywrx/3/
That is:
data: [{ y: 8, color: 'green'}, { y: 7, color: 'green'}, { y: 6, color: 'yellow'}, { y: 5, color: 'yellow'}, { y: 4, color: 'red'}, { y: 3, color: 'green'}, { y: 2, color: 'red'}, { y: 1, color: 'red'}],
We are displaying a mean, so the data can actually be any number (with two decimals) between 0-100.
What is the best option to achieve column colour based on a value range?
You can iterate on each point in the serie and update color by condition.
var color;
$.each(chart.series[0].data, function(i, data){
if(data.y<4) {
color = 'red';
} else if((data.y>4) && (data.y <6)) {
color = 'yellow';
} else if(data.y > 6) {
color = 'orange';
}
data.update({
color: color
});
});
Example: http://jsfiddle.net/buzLywrx/4/
I'm actually trying to use HighCharts for displaying multiple threshold.
Here is the portion of my code.
Especially here :
var translatedThreshold = series.yAxis.translate(threshold1),
y1 = Math.round(series.yAxis.len - translatedThreshold),
y2 = y1 + 2; // 0.01 would be fine, but IE9 requires 2
// Apply gradient to the path
series.graph.attr({
stroke: {
linearGradient: [0, y1, 0, y2],
stops: [
[0, colorAbove],
[1, colorBelow]
]
}
});
// Apply gradient to the area
if (series.area) {
series.area.attr({
fill: {
linearGradient: [0, y1, 0, y2],
stops: [
[0, colorAbove],
[1, colorBelow]
]
}
});
}
Actually, there is two thresholds, one on 0 and one on 3.
For the dots, the threshold is correct (a blue dot is displayed because its value is between 0 and 3 and its color value is ColorMiddle).
For the curve, and the area, the colorMiddle values are not displayed though, because I don't know how to add them on the series graph.
I think I must use a translatedThreshold2 with series.yAxis.translate(threshold2), and add them on the series.area.attr but I don't know how exactly.
Does anyone have an idea ?
EDIT1 : I managed to display the threshold line (in blue on the example below) but the area is not filled correctly. The area should be in blue between 0 and 300 and it's the color green (AKA colorAbove, and not colorMiddle).
Result is displayed here : http://jsfiddle.net/LeLwu/27/ (it happens to be different in Chrome and Firefox ...)