Highcharts - Combine y axes - highcharts

Is there a way to combine different y axes into one?
I have 23 data sets that I want to display on the same line graph and I want it to only have one y axis, despite the fact that the different lines' values highly differ (for example, points in one line can fluctuate around 50 000 and in another line around 5 or 6).
What I am looking for is this:

You can mock multiple y axes to be shown as one. One main axis should have line and ticks, the other should not - you can set that with tickWidth, tickLength and lineWidth options (for each axis separately).
Then you need to set vertical position of the axes by setting their offset to 0. You also need adjust their min, max and tickPositions to fit the data.
Example of the axes config:
yAxis: [{ // Primary yAxis
min: 4.5,
max: 27.5,
tickPositions: [7, 25],
startOnTick: false,
endOnTick: false,
gridLineWidth: 0,
offset: 0,
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: null
},
}, { // Secondary yAxis
gridLineWidth: 0,
offset: 0,
title: {
text: null
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
lineWidth: 1,
tickLength: 10,
tickWidth: 1,
tickPositions: [49.9, 220]
}, { // Tertiary yAxis
gridLineWidth: 0,
endOnTick: false,
startOnTick: false,
min: 1009,
max: 1018.5,
tickPositions: [1009.5, 1018],
offset: 0,
title: {
text: null
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
example: http://jsfiddle.net/w7z1p8qy/

Related

Sync ticks on multiple independent axis

I am working on a diagram with 2 independent y-axes. The left one with temperature data and the right one with humidity data. I want to synchronize the ticks from the right axis with the ticks and grid lines from the left axis.
I have achieved synchronization with tickPixelInterval, but only with startOnTick and endOnTick enabled. But unfortunately this will scale the series down.
https://jsfiddle.net/chartman2000/wLrf9s7x/5/
yAxis: [
{
// startOnTick: false,
// endOnTick: false,
gridLineWidth: 1,
gridLineDashStyle: 'Dash',
lineWidth: 1,
lineColor: '#ea0016',
labels: {
format: '{value}°C',
},
tickPixelInterval: 300 / 5,
min: 3,
max: 25
},
{
// startOnTick: false,
// endOnTick: false,
gridLineWidth: 0,
lineWidth: 1,
lineColor: '#008ecf',
title: {
rotation: -90,
},
labels: {
format: '{value}%',
},
opposite: true,
tickPixelInterval: 300 / 5,
min: 23,
max: 25.8,
},
],
Chart with false scaling but tick sync
Is there a solution to synchronize the ticks and get a correct scaling like in the chart in the second fiddle, where endOnTick and startOnTick are disabled?
https://jsfiddle.net/chartman2000/wLrf9s7x/
yAxis: [
{
startOnTick: false,
endOnTick: false,
gridLineWidth: 1,
gridLineDashStyle: 'Dash',
lineWidth: 1,
lineColor: '#ea0016',
labels: {
format: '{value}°C',
},
tickPixelInterval: 300 / 5,
min: 3,
max: 25
},
{
startOnTick: false,
endOnTick: false,
gridLineWidth: 0,
lineWidth: 1,
lineColor: '#008ecf',
title: {
rotation: -90,
},
labels: {
format: '{value}%',
},
opposite: true,
tickPixelInterval: 300 / 5,
min: 23,
max: 25.8,
},
],
Chart with tick sync but false scaling
( violet, brown and orange series belongs to the left axis | blue series belongs to the right axis )
I've been looking for a solution for days. Hopefully you can help me.
You can manually calculate and set tickPositions:
yAxis: [{
...,
tickPositions: [5, 10, 15, 20, 25],
min: 3,
max: 25
}, {
...,
tickPositions: [23.2545, 23.8911, 24.5274, 25.1637, 25.8],
min: 23,
max: 25.8,
}]
Live demo: https://jsfiddle.net/BlackLabel/n9xhsqfb/1/
API Reference: https://api.highcharts.com/highcharts/yAxis.tickPositions

Highcharts - Equal spacing between ticks with provided tickPositions

Highcharts.chart('container', {
chart: {
height: 'some height',
},
title: {
text: ""
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [], // data
xAxis: {
title: {
enabled: false
},
lineWidth: 1,
lineColor: 'white',
tickAmount: 5,
min: 100000000,
max: 1000000000000,
tickPixelInterval: 100,
tickPositions: [1000000000, 10000000000, 100000000000, 1000000000000]
},
yAxis: {
height: '100%',
title: {
enabled: true,
text: 'Investment'
},
tickAmount: 10
}
})
The above code produces something like this
The labels on the xAxis are overlapping as the range is quite high(Ranging from 100 million to 1 trillion).
On reading highcharts API doc, I found that the method tickPositions overwrites the values in tickPixelInterval & tickInterval. That's why I'm not able to specify custom tickInterval value.
What I want is, to keep equal spacing between each of the mentioned tickPositions. It'll be fine if the bubbles overlap.

Forcing yAxis.max is not respected in Highcharts

...or what is my fault?
I am trying to set the yAxis.max values on both axis. But it doesn't work.
The left yAxis should go from 330-410 with a tickInterval of 10, the right one from -0.6-1,1 with a tickInterval of 0.1.
Here is a fiddle.
yAxis: [{
labels: {
style: {
color: "#4553c5"
}
},
title: {
text: "ppm",
align: "high",
rotation: 0,
x: 10,
y: -30,
textAlign: 'left',
style: {
color: "#4553c5"
}
},
min: 330,
max: 410,
tickInterval: 10,
gridLineWidth: 1,
gridLineColor: '#efefef',
endOnTick: false
}, {
labels: {
style: {
color: "#ec5d61"
}
},
title: {
text: "°C Anomaly",
align: "high",
rotation: 0,
textAlign: "right",
x: -10,
y: -30,
style: {
color: "#ec5d61"
}
},
min: -0.6,
max: 1.1,
tickInterval: 0.2,
gridLineWidth: 1,
gridLineColor: '#efefef',
opposite: true,
endOnTick: false
}],
What is wrong with it? Thanks for any hints!
When using a dual axis, min and max get confounded by the default alignTicks setting.
Setting alignTicks to false will usually fix the problem
chart: {
alignTicks: false
},
Example:
http://jsfiddle.net/jlbriggs/9hnx0w46/6/
OTOH, using a dual y-axis chart like this is generally a bad idea, as it confounds two series whose interactions don't mean anything, since they are being measured on two different scales.
Useful read on the subject:
https://www.perceptualedge.com/articles/visual_business.../dual-scaled_axes.pdf
When you use multiple yAxis, min and max values usually calculated by HighCharts and these calculated values overrides your settings.
The trick is using tickAmount, startOnTick and endOnTick together.
Here is the solution of your problem: jsFiddle

Highcharts Polar Plot area scaling issues

I created a graph with Highcharts polar type. The boundaries of chart are overflowing. Can anyone please help me in fixing the graph.
Please find my problem on JSFiddle:
JSFiddle
Code:
$(function () {
$('#container').highcharts({
chart: {
polar: true,
showAxes: false
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 10,
lineColor: "#000000",
gridLineWidth: 5,
gridLineColor: "#000000"
},
yAxis: {
offset: 120,
tickmarkPlacement: 'on',
min: 0,
max: 4,
visible: false,
endOnTick: false
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
},
line: {
color: "#ff0000",
lineWidth: 10
}
},
series: [{
type: 'line',
name: 'Line2',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
});
This produces axis outside plot area. I would like to increase plot area so as to see the meeting point of extremist end points.
The reason the Plot is overflowing is because you have set a Maximum Value for the yAxis of 4 but in your data you have values that are greater than 4, like 8,7,6 and 5.
Just remove the max: 4 option from the yAxis Object and your Chart will display fine.

react-highcharts yAxis max/ceiling not working with many axis

I'm using react-highcharts, I have a graph with 2 yAxis one of these is a percentage and doesn't make sense to have values higher that 100%.
I'm trying to set 100 as a max value.
http://take.ms/lYjkT
(120% and 6 values are unnecessary)
I tried using
- yAxis.max: 100 and yAxis.min: 0
- yAxis.ceiling: 100 and yAxis.floor: 0
- yAxis.maxPadding: 0, yAxis.minPadding: 0
also I tried using yAxis.tickInterval, yAxis.minRange, yAxis.endOnTick but nothing works.
Other thing I tried is to use
- chart.alignTicks: false
and it looks better
http://take.ms/2PLiL
But 0 should be at bottom of the graph, also I prefer to use alingTicks:true and cut the unnecessary values.
This is the config I'm using
yAxis: [{
gridLineWidth: 0,
title: {
text: '',
style: {
color: window.Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value}',
style: {
color: window.Highcharts.getOptions().colors[1]
}
},
},
{
gridLineWidth: 0,
maxPadding: 0,
minPadding: 0,
minRange: 100,
ceiling:100,
floor: 0,
title: {
text: '',
style: {
color: window.Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value}%',
style: {
color: window.Highcharts.getOptions().colors[1]
}
},
opposite: true
}]
Do you know how to do it work?

Resources