I have a heatmap in Highcharts where the value range is from -1 to 100. My low value color is #FF0000, which I expect to be mapped to the value of -1. Instead, highcharts seems to be extending my color axis range so that a value of -25 would be shown as fully red, so my actual low value in the bottom left gets shown in a faint pink. I have tried specifying min and max values for the colorAxis, but it doesn't seem to do anything for me. How can I get the color axis configured such that my -1 value will be rendered as red?
Here's my existing colorAxis configuration, which doesn't seem to be doing the right thing:
colorAxis: {
stops: [
[0, '#FF0000'],
[0.25, '#FFFFFF'],
[0.5, '#00FF00'],
[0.75, '#FFFFFF'],
[1, '#0000FF']
],
min: -1,
max: 100
}
Here's a fiddle showing this: https://jsfiddle.net/cfarmerga/cLncce08/9/
In the below screenshot, for some reason the cursor is in the wrong place. It should be hovering over the bottom left cell in the heatmap where the value is -1.
It looks like there are startOnTick and endOnTick properties of the colorAxis that can eliminate the auto-extending axis. When I added these and set them to false, my color range is what I expect.
colorAxis: {
stops: [
[0, '#FF0000'],
[0.25, '#FFFFFF'],
[0.5, '#00FF00'],
[0.75, '#FFFFFF'],
[1, '#0000FF']
],
min: low,
max: high,
startOnTick: false,
endOnTick: false
},
The docs: https://api.highcharts.com/highmaps/colorAxis.startOnTick
Related
i have a highstock chart and i set min value in yAxis, what i need is that xAxis line cross yAxis on specified min value of y axis, but there is a gap between them?
yAxis: {
opposite: true,
crosshair: false,
min:10000,
},
js fiddle
Try setting the yAxis option startOnTick to false, that to force a start from the first tick that is your minimum.
yAxis: {
startOnTick: false,
max: 80000,
min: 10000,
},
Demo: https://jsfiddle.net/BlackLabel/wjgqd1yn/
I am trying to set customise y-Axis in highcharts, where i have data count in two digits and more than 6 digits too, i have set y-axis tickPosition according to my need like [0,50,500,5000,50000,500000]. But i want the spacing between my grids equal.
My Result
Highcharts.chart('container', {
title: {
text: 'Custom tick positions'
},
subtitle: {
text: 'through axis.tickPositions and axis.tickPositioner'
},
xAxis: {
},
yAxis: {
tickPositions: [0, 50, 500, 5000,50000,500000]
},
series: [{
data: [
[0, 5000],
[1, 422102],
[2, 93210],
[3, 45111],
[4, 12]
]
}]
});
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/tickpositions-tickpositioner/
In above link example, I dont want that extra spacing after 2 in x axis, i want those space to be equal. in my case it will also be helpful in y-axis.
You need to use yAxis.type and convert the tick into a log scale:
yAxis: {
type: 'logarithmic',
tickPositions: [0,50,500,5000,50000,500000].map((v) => Math.log10(v)) // Used to convert the numbers in logarithmic scale
},
Fiddle
Is it possible to get the tickmark exactly on its value, and not in the middle of the hour? In my heatmap I have 1/4h values, so the tickmark position doesn't make sense. To illustrate this, I take a sample of Highcharts and make a little modification:
https://jsfiddle.net/wczo89Le/1/
Definition of the yAxis:
yAxis: {
title: {
text: null
},
labels: {
format: '{value}:00'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 6, 12, 18, 23],
tickWidth: 1,
min: 0,
max: 23
},
Consider the 2 first hours in the charts. There are 1/4 value. But the tick of 00:00 is on 00:30.
Antoher problem is the tooltip doesn't show the value where the mouse is. But it is offset. So it's not possible to get the last value (23:45) in the day shown in the tooltip.
Many thanks
Highcharts does a great job figuring out appropriate tick intervals.
However, I have a "duration" series (in ms), which I format e.g. like "3y 6M" or "1d 3h" or "3h 30min" for display. Because Highcharts is optimizing the tick intervals for the ms value (e.g. 10,000,000ms), I end up with awkward values such as [ 2h 46min 40s, 5h 33min 20s, 8h 20min ] rather than [ 3h, 6h, 9h ].
Can I get Highcharts to prefer multiples of certain values (e.g. 1000, 60 * 1000, 60 * 60 * 1000 etc)? I'd rather not have to calculate the exact tick interval myself (depends on chart size etc).
I think you should consider using datetime axis for yAxis. For example: http://jsfiddle.net/jRGvs/
yAxis: {
type: 'datetime'
},
series: [{
type: 'column',
name: 'Column',
data: [Date.UTC(1970, 0, 1, 2, 30),
Date.UTC(1970, 0, 1, 1, 45),
Date.UTC(1970, 0, 1, 4, 10),
Date.UTC(1970, 0, 1, 3, 30)]
}]
you can go with label > formatter for yAxis,
here you can write a routine which will handle the text/value to be displayed beside the grid line. but the thing is you cannot override the tick interval from here.
In the below demo link, if user clicks on series or legend [Jane or John] the values or graph dynamic sets the y axis values based on the series input.
Is there a way to set a static or equal set of values on either side of threshold? [7.5,5,2.5,0-2.5,-5,-7.5]??? which remains constant?
Example from highcharts demo section
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
You need to set min/max values on the Y-axis, like bellow
yAxis: {
min: -7.5,
max: 7.5
}
Or you can do let highcharts set the extremes, but set manually after
var chart = $('#container').highcharts({
...
}).highcharts();
var extremes = chart.yAxis[0].getExtremes();
chart.yAxis[0].setExtremes(extremes.min, extremes.max);