I'm trying to display two splines (xAsis: Date, yAxis: Number) in one plot for comparision. Problem here that x axis values is totaly different from spline to spline. I need to stack them somehow. I tried to use different x axis, but splines draws one after another. Is there a way to do this using Highstock or Highcharts API?
Here is screenshot of plot with two axis
You need to use separate xAxis for the series:
xAxis: [{
type: 'datetime'
}, {
type: 'datetime'
}],
series: [{
type: 'spline',
data: [...]
}, {
xAxis: 1,
type: 'spline',
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/ch9Lu56s/
API Reference: https://api.highcharts.com/highcharts/series.spline.xAxis
Related
Hello Highcharts and stackoverflow,
I would like to make it easy for end users to compare wedgets in a Variable radius pie chart (basically the same as Line to the Y axis on hover but radial). As such, when they hover on a wedge, I would like to draw a "ring" around the circle for easy comparisons. This would be appear/disappear/change based on which point you are hovering on.
(in some ways - like a mix between the visualization of the Variable radius pie chart with the concept of an axis like a Polar/Radar Chart)
Any ideas?
Use column series in polar chart with crosshair:
chart: {
polar: true
},
series: [{
type: 'column',
pointPadding: 0,
groupPadding: 0,
colorByPoint: true,
data: [...]
}],
yAxis: {
crosshair: {
color: 'red',
zIndex: 3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5005/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/yAxis.crosshair
I have a column highcharts chart that I am trying to enable zooming on. The issue I am having is that when I try and zoom in on a small slice of the chart it always zooms to 200 and not smaller. How can I get it to zoom into the x area I have actually selected? Here is a fiddle showing the issue.
https://jsfiddle.net/3gh40fpy/
Highcharts.chart('container', {
yAxis: {
min: 0,
max: 1.1
},
series: [{
name: 'series',
data: [
[1, 0.4648303],
[38.6, 0.3659616331],
[76.2, 0.1323167732],
[113.8, 0.0300049188],
[151.4, 0.0049188392],
[189, 0.0009837678],
[226.6, 0.0004918839],
[264.2, 0],
[301.8, 0],
[339.4, 0.0004918839],
[377, 0]
]
}],
chart: {
type: 'column',
zoomType: 'x'
}
});
In case of your chart you should be able to use xAxis.minRange parameter for changing the minimum range to display on xAxis axis:
Documentation:
http://api.highcharts.com/highcharts/xAxis.minRange
xAxis: {
minRange: 1
},
http://jsfiddle.net/xLzvn73o/
I have here https://jsfiddle.net/ezhp5a4j/6/ an area and a stacked bar chart But I need to achieve something like : adding another series:column behind this actual but not stacked, starting from jan. 2010 and end dec. 2010 with a certain position in y axis, my need is quiet simple, but I don't know how achieve, I think I need another X axis ?
Actually I have:
xAxis: {
type: 'datetime',
ordinal: false
},
Maybe I need add array to this or so?
You could do this with a second axis, but it's not necessary.
If you add your new data series, with some additional parameters to control the size and spacing, it can all use the same x axis.
Example:
{
"name": 'Summary',
type: 'column',
grouping: false, <-- make sure they don't group with the other series
stacking: false, <-- make sure they don't stack on the other series
color: 'rgba(0,0,0,0.5)',
pointRange: 86400000 * 365, , <-- 1 year; set to desired time frame
pointInterval: 86400000 * 365, <-- 1 year; set to desired time frame
pointPadding: 0.01,
groupPadding: 0,
data: [10000, 15000, 9000, 13000]
}
Updated fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/15/
Output:
EDIT for comment:
To add a second axis, you change the xAxis object to an array of objects, like this:
xAxis: [{
type: 'datetime',
ordinal: false
},{
linkedTo: 0,
type: 'datetime',
ordinal: false
}]
If they are going to have different scales, I am not sure that it makes any sense to plot them together, but in that case, you would remove the linkedTo: 0
Then, in your data, you need to specify which data series are plotted on the second axis, by adding xAxis: 1 to the series options (you don't need to specify xAxis: 0 for the other series, as 0 is the default.
Since you have specified a pointStart in your plotOptions, if the series plotted on the second axis will have a different scale, you will need to specify a separate pointStart in that series options.
Update example fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/16/
I'm working with this chart, and the thing I'm trying to create is that for example "Apples" bar does not start from 0 on y axis. Instead of that, I want it to start from from example 25%, and to end in 75% (so that bar in chart (its height) is from 25 to 75, when you look at values in y-axis). Does anyone have an idea of how to do that? What to change?
You can use the column range chart type. See this official demonstration.
Here is a sample of your apples (JSFiddle):
$('#container').highcharts({
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Apples']
},
yAxis: [{
min: 0,
max: 100
}],
series: [{
data: [
[25, 75],
]
}]
});
I'm relatively new to HighCharts, and I would like to have two Y-axes where the data is always expressed in terms of the left-hand (primary) Y-Axis, but there is a constant function whereby you can translate the data into the terms on the right-hand (secondary) Y-Axes.
Take, for example, http://jsfiddle.net/M2EVb/
It's a constant well-known function to translate from Fahrenheit to Celsius. Even though I have specified the Primary Y-Axis as ranging from 32 to 212 with a tick interval of 18, and the Secondary Y-Axis as ranging from 0 to 100 with a tick interval of 10, the two axes don't line up properly; likely due to the "cels" data. But the point is that I would like to have the "cels" data just be another set of Fahrenheit temps, and have the right-hand Y-Axis values be the proper Celsius "translations" of their respective Fahrenheit values, and always show up.
Use the label's formatter function in the yAxis configuration to convert your yAxis ticks from F to C like this:
yAxis: [{
title: {
text: 'Temperature (C)'
},
labels: {
formatter: function() {
return YourConversionFunction(this.value) +' C';
}
}
}]
Make sure you are defining your Series using the same dataset (the F data):
series: [{
type: 'area',
name: 'Temp (F)',
data: Far_TempData,
yAxis: 0,
xAxis: 0
}, {
type: 'area',
name: 'Temp (C)',
data: Far_TempData,
yAxis: 1,
xAxis: 0,
lineWidth:0,
fillOpacity: 0.01,
visible:true
}]