I've 2 yAxis in demo, I set min/max value for both yAxis is min of 0, max of 200. But they don't work correctly. They are applied 250 for both.
Thanks
Normally I would expect endOnTick:false would sort the issue, but that didn't work on it's own.
I got it to work using endOnTick:false together with alignTicks:false.
yAxis: [{
max: 200,
min: 0,
alignTicks: false,
endOnTick: false,
title: {
text: 'Primary Axis'
}
}, {
max: 200,
min: 0,
alignTicks: false,
endOnTick: false,
title: {
text: 'Secondary Axis'
},
gridLineWidth: 0,
opposite: true
}],
Related
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.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.
...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
When using a reversed line chart with min and max values, the line is partially hidden at the min value. The problem is that the drawing canvas ends exactly at the min value line. When you have a line that is thick only part of it is visible there, the part that is lying above the min value line is hidden. You can see an example here. I tried different options to fix this but havent been successful. Is there a way you can increase the chart canvas on top?
This is the highcharts code:
$("#chart").highcharts({
chart: {
type: "line",
spacingBottom: 30,
height: 400,
alignTicks: false,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: "Chart"
},
yAxis: [{
title: null,
reversed: true,
showFirstLabel: true,
allowDecimals: false,
startOnTick: false,
endOnTick: false,
tickInterval: 5,
minorTickInterval: 1,
max: 10,
min: 1,
}],
series: [{
yAxis: 0,
data: [6,2,2,1,1,1,1,1,1,1,1,1,1,2,2,1,1,2,2,2,2,2],
lineWidth: 10,
marker: {
enabled: false
}
}]
});
The min: 0.9 works well unless you have tickPositions set as well without startOnTick set. If you are setting tickPositions, then look at adding startOnTick: false to the yAxis as well.
I'm not sure why this is a problem - you have set strict min value for yAxis, so chart is forced to cut off that line, remove that option, and this will work perfectly fine: http://jsfiddle.net/DruGa/5/
I am having a problem with Highstock. I have a multi-pane chart (multiple charts stacked on top of each other). When I specify a min and max value for the y-axis, if any value in the series is less than the min value, it will extend below the chart, usually extending into the chart below. For some reason, the same is not true for when a data point is above the max value. I can't tell if this is a bug in Highstock or just something I am doing wrong.
I understand that this is an unusual use case for Highstock, but it is necessary for the application I am developing. The only example I can find for multi-pane charts with Highstock is on their demo page at http://www.highcharts.com/stock/demo/candlestick-and-volume, but that is a different situation.
Please see my example: http://jsfiddle.net/afoster777/UJaJG/
Here is my configuration:
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false,
plotOptions: {
shadow: false,
series: {
connectNulls: false
},
plotBorderColor: "#CCCCCC",
plotBorderWidth: 2,
plotBackgroundColor: "#FFFFFF"
}
},
navigator: {
enabled: false
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
ordinal: false
},
yAxis: [{
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}, {
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
top: 320,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}],
series: [{
type: 'line',
id: 0,
name: 'Series1',
yAxis: 0,
data: series1data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}, {
type: 'line',
id: 1,
name: 'Series2',
yAxis: 1,
data: series2data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}]
});
I would appreciate any suggestions.
Edit: Apparently there is an open issue about this already (Issue# 1387). Does anyone have any ideas for a workaround?
Apparently github user sappling has made a fix for this problem and submitted a pull request. I included sappling's version of Highstock <script src="http://raw.github.com/sappling/highcharts.com/clip/js/highstock.src.js"></script> instead of the vanilla one, and the problem seems to be fixed. http://jsfiddle.net/afoster777/jEZ9w/