I have multiple Y axis on my chart, they have no titles. I cannot find a property that would allow me to add a bit of space between the axis. Is it possible ? This is what I have now. As you can see it looks very squashed.
You can use the offset property.
Example:
yAxis: [{
offset: 0,
lineColor: Highcharts.getOptions().colors[0],
title: { text: 0 }
},{
offset: 50,
lineColor: Highcharts.getOptions().colors[1],
title: { text: 0 }
},{
offset: 100,
lineColor: Highcharts.getOptions().colors[2],
title: { text: 0 }
}]
(chart margin may also need to be adjusted to suit, depending on your set up)
Fiddle:
http://jsfiddle.net/jlbriggs/pekhvvcq/
Reference:
http://api.highcharts.com/highcharts/yAxis.offset
Related
I have some highstock chart series with multiple yAxis. When I used resize enabled to true, a resizer comes and it resizes the chart as well. I want only one resizer at the bottom of 3 series which resizes the previous axis also. I think my top property in yAxis is preventing the charts from going above another axis. Please help.
I tried controlled axis previous property. which dint work
yAxis: [{
labels: {
align: 'right',
x: -3
},
height: '65%',
lineWidth: 2,
id:'cdStick'
}
, {
labels: {
align: 'right',
x: -3
},
top: '65%',
height: '35%',
lineWidth: 2,
offset: 0,
id:'vol'
resize: {
enabled: true,
controlledAxis: {
prev: ['cdStick']
}
}
}]
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/
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/
...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
I am trying to re-implement an existing graph in Highchart. I would like to know if Highchart supports such graph. If yes, Please suggest me the API/Documents that would help me in this direction.
Below is the image of what graph would look like:
How the graph should look
About Chart:
It looks as if multiple charts are combined into charts.
x-axis for all the 'Events' is time(2- years default).
Each 'Event' graph can be of different type (point, spline, continuous etc.)
Can I customize the representation of data-point in each 'Event chart' differently. i.e.(triangle,square etc).
Thanks,
Amit
An example of some of the features you've asked about:
1) using multiple y axes, stacked vertically, you can achieve the layout that you want:
yAxis: [{
top: 10,
height: 60,
offset: 0,
title: { text: 'Plot 1'}
},{
top: 80,
height: 60,
offset: 0,
title: { text: 'Plot 2'}
},{
top: 140,
height: 120,
offset: 0,
title: { text: 'Plot 3'}
},{
top: 270,
height: 60,
offset: 0,
title: { text: 'Plot 4'}
}]
On each series, you can specify individual marker settings:
marker: {
enabled: true,
symbol: 'triangle',
radius: 6,
...etc...
},
You can set a date-time x axis type:
xAxis: {
type: 'datetime'
}
Fiddle example:
http://jsfiddle.net/jlbriggs/py5cznd7/