I have three Y axis and two of which has got multiple spline series to be shown. My data is a time series data and it is all working as expected. Just that the labels of one of the Y axis is mixing up with chart area.
https://codesandbox.io/s/github/ismusidhu/yaxis_alignment_issue_highcharts/tree/master/
You can resolve it by setting appropriate yAxis.offset:
yAxis: [{
title: {
text: "POAI [W/m2]"
},
opposite: true,
offset: 70,
min: 0,
labels: {
format: "{value} W/m2"
}
}]
Demo:
https://codesandbox.io/s/alignment-of-highcharts-tertiary-y-axis-issue-bo7h4
Related
Right off the bat here is the desired chart in ChartJS.
We have two x-axes. One showing power from a meter and the other showing meter state over time (open, closed, or in standby) In both datasets the X axis is Unix time. The power Y axis is numerical and the state x axis is one of the three state categories. Both are drawn in lines.
To get right to the point: how do I do this in Highcharts? I have the second axis set up:
xAxis: {
type: 'datetime'
},
yAxis: [
{
title: {
text: 'Real Power'
}
},
{
type: 'category', //I have also removed this line
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open']
}
],
Any attempt to set the Y axis value to a string in highcharts results in a well known: https://www.highcharts.com/errors/14/
Furthermore online I only seem to find categories on the X axis. Any help getting to the right place is appreciated. Thanks in advance.
You can't use a string as x value, use a number instead, for example:
series: [{
...
}, {
...,
yAxis: 1,
data: [1, 0, 2, 1]
}],
yAxis: [{
...
}, {
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open'],
min: 0,
max: 2
}]
Live demo: http://jsfiddle.net/BlackLabel/o7Lvyadm/
API Reference: https://api.highcharts.com/highcharts/yAxis
I am implementing a Sankey Diagram using Highcharts JS and have a problem with specifying the axis. Is it even possible to use xAxis and yAxis on a Sankey diagram?
I tried specifying the axis as following:
yAxis: {
title: {
text: 'Test',
}
},
xAxis: {
title: {
text: 'Test'
}
},
but with no success. I tried putting the aforementioned code in series, plotOptions.sankey, plotOptions.series and simply when instantiating the chart but with no result.
Looking forward to your help!
Yes. Use chart.showAxes option:
chart: {
showAxes: true
},
Unfortunately in sankey series ticks are not generated for the y axis. It can be done manually like this:
yAxis: [{
lineWidth: 1,
tickPositions: [0, 1, 2, 3]
}],
Live demo: http://jsfiddle.net/BlackLabel/z5p9gba2/
API references:
https://api.highcharts.com/highcharts/yAxis.tickPositions
https://api.highcharts.com/highcharts/chart.showAxes
I am trying to get y axis to show up in highchart
I can use x-axis plotline to simulate the result, but it has the x-axis protruding over the y-axis
xAxis: {
type: 'datetime',
tickLength: 0,
plotLines: [{
color: '#000000',
width: 1,
value: 1370131200000
}]
},
Note: 1370131200000 is the lowest x value in my series.
Can someone let me know how do I define y-axis properly?
Use yAxis.lineWidth property. By default it equals to 0 and that's why the line is not visible.
API reference:
http://api.highcharts.com/highcharts/yAxis.lineWidth
I have a highstock area spline chart with categories on the Y-axis. No points on the chart will ever go over the Top category, but I have an unwanted space above the top category 'Alarm'.
My Y-axis contains min and max which I use to always display all of the categories. If I set the max to 8 I lose the Alarm Category and the empty line is still there.
Here is my Y-Axis code
yAxis: {
categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
min: 0,
max: 9,
title: {
useHTML: true,
text: 'Alert Type'
},
opposite: false,
labels: {
x: 0,
y: 8
},
},
Is there anyway which I can only display enough 'lines' for my Y-axis categories and no unwanted lines which will never be used?
All help is appreciated.
I used to draw this kind of chart (one vertical axis, one horizantal axis):
Now i have been asked to do this kind of chart:
as you see, the problem with the ordered chart that it contains (two vertical axis, one horizantal axis).
My question
does flot or any other jquery library able to do that please?
See the flot example here on multiple axis. Minimal example:
$.plot("#placeholder", [
{ data: d1 },
{ data: d2, yaxis: 2 } // set second series to use second axis
], {
yaxes: [ {
min: 0 // options for first axis
}, {
alignTicksWithAxis: 1 // options for second axis, put it on right
position: "right"
} ],
});
Two mix a bar and line chart set that in each's series object:
$.plot("#placeholder", [{
data: d1,
lines: { show: true }
}, {
data: d2,
bars: { show: true }
}]);
Putting these together, here's an example: