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
Related
I have a chart with two y-Axis. One to the left of the chart another one to the right.
The labels on the right y-Axis appear inside the chart. When I align the labels to the right the labels still overlap the y-Axis in some cases. When I add a distance x: 30, the distance becomes bigger but the labels are not fully shown anymore as they are outside the chart.
I want the labels to have a similar distance to the y-Axis as for the left y-Axis and still shown inside the chart "area".
Here a jsfiddle: https://jsfiddle.net/smaica/zrn87q0b/32/
And my chart options:
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
Highcharts.stockChart('container', {
title: {
text: undefined,
},
series: [
{
data: [
[1279324800000,0.1],
[1279411200000,0.2],
[1279497600000,0.3],
[1279584000000,0.4],
[1279670400000,0.5],
[1279756800000,0.6],
[1279843200000,0.7],
[1279929600000,0.8],
[1280016000000,0.7],
[1280102400000,0.6],
[1280188800000,0.5],
[1280275200000,0.4],
[1280361600000,0.3],
[1280448000000,0.2],
[1280534400000,0.1]
],
name: "series1",
yAxis: 0
},
{
data: [
[1279324800000,0.8],
[1279411200000,0.7],
[1279497600000,0.6],
[1279584000000,0.5],
[1279670400000,0.4],
[1279756800000,0.3],
[1279843200000,0.2],
[1279929600000,0.1],
[1280016000000,0.2],
[1280102400000,0.3],
[1280188800000,0.4],
[1280275200000,0.5],
[1280361600000,0.6],
[1280448000000,0.7],
[1280534400000,0.8]
],
name: "series2",
yAxis: 1
}
],
plotOptions: {
series: {
dataGrouping:{
enabled: false
},
lineWidth: 1.5,
fillOpacity: 0.5,
}
},
chart: {
borderWidth: 0,
plotShadow: false,
plotBorderWidth: 0,
alignTicks: true,
zooming: {
type: 'x',
},
},
accessibility: {
enabled: false
},
yAxis: [{
lineWidth: 0.1,
tickWidth: 0.1,
opposite: true,
visible: true,
type: 'linear',
alignTicks: true,
labels: {
align:'right',
},
},
{
lineWidth: 0.1,
tickWidth: 0.1,
alignTicks: true,
opposite: false,
type: 'logarithmic',
gridLineColor: 'transparent',
visible: true
}],
xAxis: {
lineWidth: 0.1,
tickWidth: 0.1,
tickLength: 5,
min: Date.UTC(2010, 6, 1),
ordinal: false
},
rangeSelector: {
enabled: false
},
navigator: {
height: 30,
outlineWidth: 0.1,
handles: {
lineWidth: 0.1,
},
xAxis: {
gridLineWidth: 0.1,
tickLength: 0,
}
},
scrollbar: {
enabled: false
}
}
);
});
Thanks!
In Highstock, the yAxis.labels.align is right by default, but yAxis is the opposite as well. It might seem not intuitive, but you only need to change yAxis.labels.align to 'left'.
Demo:
https://jsfiddle.net/BlackLabel/pt2sb60x/
API Reference:
https://api.highcharts.com/highstock/yAxis.opposite
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/
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.
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
}],
I've got a spline chart with two y-axis which both use the same x-axis cycles (seconds). Zoom (xy) is enabled and works fine but now i want to zoom xy only on one series that is connected to one of the two y-axis. The other series should be static for y-axis (y-zoom disabled), so that they not zoom into y-axis... is this possible?
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy',
alignTicks: false,
resetZoomButton: {
theme: {
display: 'none'
}
}
},
title: {
text: '',
x: -20 //center
},
legend: {
enabled: false //Hide the legend
},
credits: {
enabled: false //Hide credits (highcarts.com link)
},
exporting: {
enabled: false //Hide export menu
},
xAxis: {
title: {
text: 'sec'
},
type:'second',
lineColor: '#666666',
lineWidth: 2,
endOnTick: false,
showFirstLabel: false,
startOnTick: true,
gridLineWidth: 0, //Shows a grid starting from the tick within the data content
tickInterval:1,
tickLength: 10, //Tick length (height)
tickWidth: 2, //Tick width (2px)
tickColor: '#666666',
minorGridLineWidth: 0, //Shows a grid starting from the tick within the data content
minorTickInterval:.1,
minorTickLength: 6, //Minortick length (height -> half of tick tickLength)
minorTickWidth: 1, //Minortick width (1px)
minorTickColor: '#666666',
min: 0, //Prevent for generating sizes lower than 0 on x-axis
max: 15,
labels:{
y: 25
}
},
yAxis: [{
title: {
text: 'm/s'
},
gridLineWidth: 0,
lineColor: '#8BC926',
lineWidth: 2,
min: 0,
max: 200,
offset: 15 //Space between y-axis and x-axis
}, {
title: {
text: 'Bar'
},
gridLineWidth: 0,
lineColor: '#389FFF',
maxZoom: 0,
lineWidth: 2,
min: 0,
max: 300
}],
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
color: '#8BC926',
data: [
{x: 0, y: 80},
{x: 1, y: 110},
{x: 2, y: 100},
{x: 3, y: 50},
{x: 4, y: 75},
{x: 5, y: 90}
],
yAxis: 0
},
{
color: '#389FFF',
data: [
{x: 0, y: 170},
{x: 1, y: 210},
{x: 2, y: 240},
{x: 3, y: 210},
{x: 4, y: 170},
{x: 5, y: 100}
],
yAxis: 1
}]
JS Fiddle (Full example code)
It's not a part of the API, but you can use yAxis.zoomEnabled option: http://jsfiddle.net/0zczvLr9/ - just set for these axes which you don't want to enable zooming.