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
Related
I am using advanced accessible high charts and I need to be able to increase and decrease the height of gridlines based on the data points for a particular series. If the data points for a particular series is less than 10 I want the height of the gridline to be 30 px else if the data points is between 10 and 15 I want the height to be 50px if the data points are more than 20 i will need the gridline height to be 100px
The only solution that came to my mind is to attach each series into an independent axis which allows setting each axis height (in percentage or pixel value).
xAxis: [{
height: '30%',
}, {
height: '60%',
top: '30%',
offset: 0
}, {
top: '80%',
height: '10%',
offset: 0
}],
series: [{
data: [2, 3, 4],
xAxis: 0
}, {
data: [10, 12],
xAxis: 1
}, {
data: [10, 12],
xAxis: 2
}]
Demo: https://jsfiddle.net/BlackLabel/8pu13s7d/
API: https://api.highcharts.com/highcharts/yAxis.height
API: https://api.highcharts.com/highcharts/yAxis.top
Currently polar chart in highchart is placing the points in fix interval set by pointInterval. Is it possible to enter coordinates in series by length and angle (or x and y)?
i.e. instead of having:
series: [
{
type: "line",
data: [1,5,3,2,1],
pointInterval: 45,
}
],
I'd like to have:
series: [
{
type: "line",
data: [[0,1],[40,5],[60,3],[150,2],[220,1]]
}
],
Where the first item is the angle and the second item is length.
Is it possible to create a Highcharts chart with splines in percentages, but WITHOUT them stacking?
I would like to display lines in a relative view, but I would like them to be crossing when their percentages changes.
Basically, like this: http://jsfiddle.net/dp6pjeo9/5/
plotOptions: {
series: {
pointStart: 2010,
stacking: 'percent'
}
},
but without the lines 'stacking' behavior. Stacking is really inconvenient for lines because it is hard to tell whether they are 'absolute' values or 'stacked' values.
See here, the top line should be under then the black line in 2010.
You need to process you data before you put them in the chart config.
Calculate sums:
var data = [3, 5, 10, 15,25]
var data2 = [25,15, 10, 5, 0]
var sum = data.map((v, i) => v + data2[i]) // grab sums
Calculate percentages and set data:
series: [{
name: 'Installation',
data: data.map((v, i) => ({
y: v / sum[i] * 100,
absoluteY: v
}))
}, {
name: 'Manufacturing',
data: data2.map((v, i) => ({
y: v / sum[i] * 100,
absoluteY: v
}))
}]
Change tooltip's pointFormat so it shows absolute y value instead of percentage value
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.absoluteY}</b><br/>'
},
example: http://jsfiddle.net/dp6pjeo9/6/
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
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);