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