heatmap Highcharts tickmarkPlacement yAxis - highcharts

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

Related

how to make highchart x axis meet y axis at min value of yAxis

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/

In highchart, after giving unequal tickPositions how to keep grid lines position equal?

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

Highcharts Timeline with xAxis values

I need to create a chart with fixed values xaxis although it contains no data to graph like this:
Is importante the min value for yaxis must be (0) but show 1 grid line
(The color does not matter, and I need to show minute by minute interval, eg 18:50, 18:51, 18: 52, 18:53 ... 10 Total ticks)
as it should be the format xaxis?
as it should enter data values?
You can use showEmpty parameter of your xAxis and yAxis to show them without any data. You can also add min and max values for calculating the extremes of your axes.
If you want to have an interval of your ticks equal to 1 min you can set it using tickInterval: http://api.highcharts.com/highcharts/xAxis.tickInterval
Here you can find code that may help you:
$('#container').highcharts({
xAxis: {
type: 'datetime',
min: Date.UTC(2016, 01, 01, 01),
showEmpty: true,
max: Date.UTC(2016, 01, 01, 01, 30),
tickInterval: 1000 * 60, // one minute
},
yAxis: {
min: 0,
max: 10,
showEmpty: true
},
series: [{
}]
});
And here you can find live example how it can work: http://jsfiddle.net/wys1duhq/1/

x-axis minimum value to 2 and tickinterval of 6 months using highcharts

I would like to put x-axis starting value as 2.0 and end value to 19.0 with tick-interval as 0.60. When i give difference as 0.60 its starts from 1.8 and ends at 19.2 even if i give minimum and maximum value. Please help me to sort out this!
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
startOnTick: true,
min:2.0,
step: 2,
max: 19.0,
startOnTick: true,
endOnTick: true,
tickInterval: 0.60
},
series: [{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13,14,15,16,17,18,19]
}]
});
});
http://jsfiddle.net/aparnaunny/6mHfw/1/
^ This is what i tried.
Thanks,
Aparna Unny
The problem is that you want a range of size 17 (19 - 2) with a tickInterval of 0.6. 17 doesn't devide equally by 0.6, so the chart has to adjust the min/max.
Also, 2 isn't a multiple of 0.6, so startOnTick must be false if you want to start at 2.
Either pick a different ticker interval (e.g. 0.5) or chose a min/max range which devides eqully by 0.6 e.g. 2 / 19.2
xAxis: {
min:2.0,
step: 2,
max: 19.0,
startOnTick: true,
endOnTick: true,
tickInterval: 0.50
},
or
xAxis: {
step:2,
min:2.0,
max: 19.4,
startOnTick: false,
endOnTick: false,
tickInterval: 0.60
},

Override tick interval calculation in Highcharts?

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.

Resources