I am trying to plot a 'scatter' graph and 'columnrange' graph with multiple y-axis (ie two graphs stacked on top of each other with common x-axis). The scatter plot represents an event that occured in particular month and columnrange plot represents the time duration of an event. Both the graphs represent one and only one event type. I tried many things but was not able to produce a graph with my requirements.
$(function() {
$('#container').highcharts({
title: { text: null },
subtitle: { text: null },
legend: { enabled: false },
xAxis: {
type: 'datetime',
title: { text: null }
},
yAxis: [{
top: 10,
height: 60,
offset: 0,
title: { text: 'Plot 1'}
},{
top: 80,
height: 60,
offset: 0,
title: { text: 'Plot 2'}
}]
});
chart = $('#container').highcharts();
chart.addSeries({
yAxis: 0,
type: 'scatter',
marker: {
enabled: true,
symbol: 'triangle'
},
data: [[1356977700000,1], [1359656100000,1], [1364753700000,1]]
});
chart.addSeries({
yAxis: 1,
type: 'columnrange',
data: [[1356977700000, 1359656100000], [1362075300000, 1364753700000]]
});
});
This is how I want to represent columnrange graph
This is how my current plot looks like (second graph is behaving as 'column' graph instead of 'columnrange')
Also I would like to locate the scatter plot points in the middle of the area assigned for scatter plot. How can I achieve that. (currently I have set y=1 for scatter graph.)
To have columnrange series inverted a chart needs to be inverted.
If you want for columntange points to share same horizontal line, then set same x value for points.
Example: http://jsfiddle.net/ubdxdqnh/
Related
Using highcharts, how can I plot a column chart that color individual columns depending on value and display legend based on value? See example on the image below
Use chart with multiple column series and x-axis with category type:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: [...]
},
series: [{
color: 'red',
data: [...]
}, {
color: 'green',
data: [...]
}, {
color: 'blue',
data: [...]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/57yzefq4/
API Reference:
https://api.highcharts.com/highcharts/series
https://api.highcharts.com/highcharts/xAxis.categories
good morning guys,
I need your help for a problem that I can not solve.
I need to highlight the intersections between a simple data series and the related moving average.
The data of the moving average are automatically generated by HighStock and are not calculated by me (otherwise I would have almost solved the problem!).
If it is not possible to graphically highlight with different colors every time the series is above or below the moving average
I would like to calculate the difference between the two series (in this way I could draw a single line around the zero value with negative red values and values green positive for example).
After numerous researches I have not yet solved my problem. I must say that the documentation of HighChart / HighStock is very complete but it is mainly for professionals.
Thanks for your help!
This is what I need (look at the picture)
$('#container').highcharts('StockChart', {
title: { text: 'Relative Strenght' },
navigator: { enabled: false },
series: [
{
id: 'forza-rel',
type: 'spline',
name: 'Rel. Str.',
data: forza_relativa,
},
{
name: 'M.A. 5',
type: 'sma',
linkedTo: 'forza-rel',
color:'#FF0000',
dashStyle: 'line',
marker: { enabled: false },
params: { period: 5 }
}
]
});
I need to highlight the intersections between a simple data series and
the related moving average.
It can be done, however, it requires a lot of custom code and it's a bit tricky.
I would like to calculate the difference between the two series
This can be done easily. SMA is just another series, so you have to loop through SMA series data and make a difference between its data and a basic series data. Than use series.setData() method to update the third series with calculated values (areasplie for example).
HTML:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JS:
Highcharts.stockChart('container', {
chart: {
height: 500,
events: {
load: function() {
var chart = this,
series = chart.series,
data = [],
offset,
diff,
i;
offset = series[0].xData.length - series[1].xData.length;
for (i = 0; i < series[1].xData.length; i++) {
diff = series[0].yData[i + offset] - series[1].yData[i];
data.push({
x: series[1].xData[i],
y: diff
});
}
chart.series[2].setData(data);
}
}
},
rangeSelector: {
selected: 0
},
title: {
text: 'AAPL Stock Price'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
yAxis: [{
height: '60%',
top: '0%',
id: '0'
}, {
height: '36%',
top: '62%',
id: '1'
}],
series: [{
type: 'spline',
id: 'aapl',
name: 'AAPL Stock Price',
data: data,
yAxis: '0'
}, {
type: 'sma',
linkedTo: 'aapl',
marker: {
enabled: false
},
yAxis: '0'
}, {
type: 'areaspline',
yAxis: '1',
color: 'green',
negativeColor: 'red',
data: []
}]
});
Demo:
https://jsfiddle.net/wchmiel/863n241h/3/
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/
I need to plot a radar chart using HighCharts; in particular, all of the series have a different scale. I am able to draw correctly the radar chart using multiple scales (one per y-axis), but I see multiple overlapping labels on the main y-axis, which is clearly wrong. Now, I want instead to plot the labels related to every y-axis on the corresponding y-axis. How can I do this ?
Here is a snippet that can be pasted in jsFiddle to verify that the labels indeed overlap.
$(function () {
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
polar: true,
type: 'line',
zoomType: 'xy'
},
title: {
text: 'Indicators Radar Chart',
x: -80
},
pane: {
size: '90%'
},
xAxis: {
categories: ['A', 'B', 'C', 'D'],
tickmarkPlacement: 'on',
lineWidth: 0,
min: 0
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}],
tooltip: {
shared: true,
valuePrefix: ''
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
series: [{
name: 'Austria',
yAxis: 0,
data: [0.130435, 35.043480, 29288.695312, 236960.296875],
pointPlacement: 'on'
}, {
name: 'Germany',
yAxis: 1,
data: [0.000000, 42.217392, 149103.906250, 589782.500000],
pointPlacement: 'on'
}, {
name: 'Italy',
yAxis: 2,
data: [2.304348, 44.826088, 132805.218750, 878785.937500],
pointPlacement: 'on'
}]
});
});
The output I am trying to obtain is such that for this particular chart, the labels related to the different scales appear along each axis: from the center point to A, from the center point to B, from the center point to C and from the center point to D. The problem is that right now all of the labels appear on the same axis, from the center point to A.
Thank you in advance.
Demo: http://www.highcharts.com/jsbin/eyugex/edit
You seem to assume that each of the axes extend from the center to different directions, but this is not the case. All Y axes extend from the center. The X axis starts on top of the chart and follows the perimeter clockwise around the perimeter and ends on top. The Y axis labels are drawn where the X axis starts, which is up.
In a chart like this it wouldn't make sense to add multiple Y axes because they are all drawn on top of each other and you can't visually distinguish one from another.
I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.
HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.
Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.
Example:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 650]
}]
});
});
});
JSFiddle for above code: http://jsfiddle.net/4R5HH/3/
The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.
One other option that does not introduce data points:
yAxis: {
minRange:450,
min:0,
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.
See updated fiddle.
You need to add in a point to you chart but disable the marker.
I added a new series with scatter plot type and its value equal to the goal value:
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}
See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/
In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem.
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450],
enableMouseTracking: false
}
See updated jsFiddle: http://jsfiddle.net/4R5HH/570/
You could simply set the max attribute to the max value you will have:
yAxis: {
max:650 //HERE
plotLines...
},
Adjust the axis while loading the chart:
$(function() {
$('#container').highcharts({
chart: {
events: {
load: function() {
var check = $('#container').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
},
yAxis: {
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 200
}]
},
series: [{
data: [70, 60, 95]
}]
});
});