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 :(
Related
I'm creating a column chart that has two series (Income and Expenses) in Highcharts. I would like to have no padding between each column and I would like to be able to set the maxPointWidth to a value.
I already tried setting the maxPointWidth to a value and setting the pointPadding to zero. But when I do that the columns have extra padding between each of the series.
plotOptions: {
series: {
grouping: true,
pointPadding: 0,
maxPointWidth: 32
}
}
I expected the columns to be adjacent to each other but instead the columns had even more space but the maxPointWidth did restrict the thickness of the columns to 32.
You can try to set also the groupPadding = 0 and borderWidth = 0:
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
maxPointWidth: 32,
groupPadding: 0
}
}
Note, that columns are equally spaced on the chart plot area and when you set fixed columns width then space between them has to be adjusted.
Demo:
https://jsfiddle.net/BlackLabel/5f614cjz/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding
https://api.highcharts.com/highcharts/series.column.borderWidth
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
},
I would like some help with this chart. If the series values are not 0.0, the minimum value of the chart is 0, and it's correctly on the bottom of the chart:
But if the values are all equal to 0.0, the y-axis line is shown in the middle of the chart:
I try to set
{min: 0,}
on the y-axis, but it doesn't work. Obviously I can't set a max value because I have a dynamic data. How can I solve this?
If you can't set a max, you can set a minRange
yAxis: [{ // Primary yAxis
min: 0,
minRange: 0.1,
http://jsfiddle.net/tZayD/
I can't figure out how to make the space between categories smaller.
I used:
series:{
pointPadding: 0,
pointWidth:30,
groupPadding: 0
}
If I increase pointWidth to 30 for example the bars overlap each other instead of taking up the white space between.
This is my chart:
http://jsfiddle.net/domino/QzCSa/2/
Change the groupPadding: 2 property from 0 to 2
Play with this property and get the width which you want.
Hope this helps
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 ...)