Set HighChart yAxis's min max to a specific series only - javascript

I have a stock price candlestick series And a line series that share yAxis with the candlestick series. By default, the API automatically set chart's yAxis range to the min/max of two series's min/max(candlestick series, line series)
But I want to show the candlestick series more importantly than line chart. So, chart's yAxis min/max should be limited only the candlestick series even if it cut the line series off.
And the yAxis min/max should be adjusted when the chart is scrolled dynamically.
How can I do that?
jsfiddle simple code
var chartData = [
[1473687000000, 102.65, 105.72, 102.53, 105.44],
[1473773400000, 107.51, 108.79, 107.24, 107.95],
[1473859800000, 108.73, 113.03, 108.6, 111.77],
[1473946200000, 113.86, 115.73, 113.49, 115.57]
];
var avgData = [
[1473687000000, 250],
[1473773400000, 300],
[1473859800000, 280],
[1473946200000, 290]
];
$(function() {
Highcharts.stockChart('container', {
// title: {text: '---'},
rangeSelector: {
buttons: [
// { type: 'hour', count: 1, text: '1h' },
{ type: 'day', count: 1, text: '1d' },
// { type: 'all', count: 1, text: 'All' }
],
selected: 1,
//inputEnabled: true
},
xAxis: [{
type: 'datetime',
}],
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {text: 'OHLC'},
height: '100%',
lineWidth: 2,
resize: {
enabled: true
}
}],
plotOptions: {
candlestick: {
downColor: 'blue',
upColor: 'red',
dataGrouping: {
enabled: false,
}
}
},
series: [{
name: 'ohlc',
type: 'candlestick',
data: chartData,
}, {
name: 'avg',
type: 'line',
data: avgData,
}]
});
});
dic#container {height: 100%; width: 100%;}
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="//code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container"></div>

In 'afterDrawChartBox' event, you can use setExtremes method with min and max values from candlestick series:
Highcharts.addEvent(Highcharts.Chart, 'afterDrawChartBox', function(e) {
var candlestick = this.series[0];
this.yAxis[0].setExtremes(candlestick.dataMin, candlestick.dataMax, true, false);
});
Live demo: https://jsfiddle.net/BlackLabel/520km1wv/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

Related

How to position dataLabels at the midpoint of an arearange chart in highcharts?

Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance
You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter

Sankey: Show dynamically text on x-axis

How to show dynamic text on x-axis based on transition. In my first case, I am getting two transitions(football -> basketball & basketball -> Gerard) so I will be showing two labels just like below
But When we get only one transition so how to handle label on the x-axis. What I need is when only one transition is there one label should only come. In the below case Semi-Final label should come.
Highcharts.chart('container', {
chart: {
showAxes: true
},
title: {
text: ''
},
xAxis: {
type: "category",
categories: ['Semi-Final','Final Phase'],
max: 2,
labels: {
x: 10,
y: 30,
},
lineColor: 'transparent',
tickLength: 0
},
yAxis: {
visible: false
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Football', 'Cricket', 20 ],
],
type: 'sankey',
}]
});
The number of displayed labels depends on axis extremes. You can make max property dependent on the number of data:
events: {
load: function() {
var max = this.series[0].nodeColumns.length - 2;
this.xAxis[0].update({
max: max
})
}
}
Live demo: https://jsfiddle.net/BlackLabel/7s5h41qr/
API: https://api.highcharts.com/highcharts/xAxis.max

How to make multiple Y-axis with incoming series of data from database using Highcharts

Actually the thing is,I want a graph in which the series of data will be shown but not with single y-axis.But with multiple y-axis,let's say i have 8 series of data which will be shown in single chart with single y-axis.What I want it tobe selective i.e the user will click the stream on and off to make it visible or disable it,at the same time the axis of each series of data will also get visible.
Here is the link of desired graph(the graph what i want actually).
`
<!-- Styles -->
<style>
#chartdiv {
width : 140%;
height : 800px;
}
.highcharts-credits {
display: none !important;
}
</style>
<!-- Resources -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>
<div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"></div>
<!-- Chart code --> <script>
$(function () {
var lastPart = window.location.pathname.split("/").pop();
$.getJSON('/demo/Devices/chGraph/'+lastPart, function(data) {
// Populate series
Xdata = [];
Ydata = [];
Xdata = data[0].CHGRAPHUpdatetime.time.split(",");
for(i = 0; i< data[0].channelGraph.length; i++) {
Ydata[i] = {"name": "", "data":[]};
Ydata[i].name = data[0].channelGraph[i].chkey;
var listnumber = data[0].channelGraph[i].list.split(',').map(function(item) {
return parseInt(item, 10);
});
Ydata[i].data = listnumber
}
console.log(Ydata);
var chart = new Highcharts.Chart({
chart: {
renderTo: container,
zoomType: 'xy',
panning: true,
panKey: 'shift',
height:600,
width:1000,
borderColor: '#EBBA95',
borderWidth: 4,
spacingTop: 30,
spacingBottom: 50,
spacingLeft: 100,
spacingRight:80
},
title: {
text: 'Monthly Average Temperature'
},
xAxis: {
type: 'varchar',
categories: Xdata
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} </b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
},
series:Ydata,
},
}) //end ajax call
}) // end javascfrpt
$('#getcsv').click(function () {
alert(chart.getCSV());
});
</script>
<!-- HTML -->
<div id="chartdiv" >
</div>
how to add multiple y axis according to each series data.
we get the data from a json and above code shows only one y axis.
I have attached the image of the graph.
This is the actual graph.
following is the required graph image
This is required graph.
What you want is possible using highcharts here is and example Multiple axes.
Basically you specify value of yAxis property as a list of objects, while creating Chart object and each object represents the kind of line will be drawn for dedicated series.
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}];
One more thing is to specify in series which axis to be used. I your case Ydata[i] is a series, it must have following structure
{
name: 'Sea-Level Pressure',
type: 'spline',
//number of axis to represent scale. 1 is by default for primary yAxis.
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}
So when you get data as response generate listYdata of objects having above structure.
I hope that solves your issue. Here is a demo after adding one more series to official example.
What you most likely need to do is to add the attribute yAxis to the yData array, so that the format will become:
[[name: "x", data: [], yAxis: 1], [name: "y", data: [], yAxis: 2] ]
Make a counter which adds 1 to the yAxis index in each iteration so you assign it to a different yAxis.
The yAxis you need to define in the chart as well
yAxis: [{
title: {
text: 'Title 1'
}
}, {
title: {
text: 'Title 2'
}
}, {
title: {
text: 'Title 3'
},
}],
You can find more information about this in this Highcharts demo

Align second scatter series to the side similar to how column and bar charts do using HighCharts

I am creating a chart and have so far found that a scatter and errorbar combination chart is the best fit. I have hit a problem when adding an extra pair of series that because I have used a scatter, that they are placed on top of each other.
This is the standard view for the chart which is correct:
This is what I WANT to happen when I add an extra pair of series data:
But this is what happens:
var chart;
$(function () {
$('#container').highcharts({
title: {
text: 'Chart'
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['Col1', 'Col2', 'Col3']
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Chart'
}, opposite: true
}
, { // Secondary yAxis
title: {
text: 'Score'
}
}],
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
x: 0,
y: 10
},
enableMouseTracking: false
},
errorbar: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
type: 'scatter',
yAxis: 1,
data: [1001.418, 1000.006, 1005.237],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[0],
padding: 3,
color: '#ffffff',
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1000.46, 1002.376], [999.071, 1000.941], [1002.753, 1007.721]]
},
//START extra data
{
name: 'Compare',
type: 'scatter',
yAxis: 1,
data: [1001.918, 1000.506, 1005.737],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[1],
padding: 3,
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1001.46, 1003.376], [1000.071, 1001.941], [1003.753, 1006.721]]
},
//END extra data
{
//force the ErrorBar icon into the legend
name: 'ErrorBar',
type: 'scatter',
marker: {
symbol: "url(data:image/gif;base64,R0lGODlhDwAMAIAAAFVVVf///yH5BAEHAAEALAAAAAAPAAwAAAIXhI8ZywEN4Yt0UnmjzWtzn4GXWFXJeRQAOw==)"
},
data:[null]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
http://jsfiddle.net/ewurrLgk/
I have taken a look through the API and I have tried to use other chart types like Line and Column and although they do align correctly, the error bar pretty much disappears because those chart types start from zero. I've also tried pointPlacement but that just moves them both into the middle. Is what I am trying to do just not possible using a scatter?
You should use pointPlacement, but set per particular series. I prepared a minified demo for you:
series: [{
type: 'scatter',
pointPlacement:-0.2,
data: [51,73]
},{
type: 'scatter',
pointPlacement:0.2,
data: [8,7.6]
},{
type: 'errorbar',
pointPlacement:-0.2,
data: [[48, 51], [68, 73]]
}, {
type: 'errorbar',
pointPlacement:0.2,
data: [[6, 8], [5.9, 7.6]]
}]
http://jsfiddle.net/6e749xx9/1/

Column width in Highcharts when combined with spline

I have this annoying thing in Highcharts that I cannot figure out. I have graphs that are dynamically generated and can contain multiple columns and splines. In the example the spline is a temperature measurement and contains lots of data points. The two columns are grouped by day and therefore contain only one value per day.
When I use this combination the column width becomes almost invisible:
http://jsfiddle.net/FXRj2/
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Test'
},
subtitle: {
text: 'Me'
},
xAxis: [{
type: 'datetime'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall 2',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
opposite: true
}, { // Tertiary yAxis
title: {
text: 'Rainfall 2',
style: {
color: '#red'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4red'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall 1',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [[1374105600000,1461.77],[1374192000000,1473.67],[1374278400000,1122.47],[1374364800000,1170.16],[1374451200000,1436.88],[1374537600000,1383.57],[1374624000000,9.73]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Rainfall 2',
color: '#red',
type: 'column',
yAxis: 2,
data: [
[1374105600000,3.28],[1374192000000,2.95],[1374278400000,3.12],[1374364800000,3.8],[1374451200000,3.61],[1374537600000,0.39]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [[1374105600000,21.9],[1374109200000,21.6],[1374112800000,21.2],[1374116400000,20.8],[1374120000000,20.5],[1374123600000,20],[1374127200000,19.7],[1374130800000,19.6],[1374134400000,19.9],[1374138000000,20.3],[1374141600000,20.9],[1374145200000,21.4],[1374148800000,21.9],[1374152400000,22.5],[1374156000000,23.1],[1374159600000,23.5],[1374163200000,23.9],[1374166800000,23.7],[1374170400000,23.8],[1374174000000,23.3],[1374177600000,23.1],[1374181200000,22.4],[1374184800000,21.9],[1374188400000,21.4],[1374192000000,21],[1374195600000,20.4],[1374199200000,20.1],[1374202800000,19.7],[1374206400000,19.3],[1374210000000,19],[1374213600000,18.7],[1374217200000,18.9],[1374220800000,19.3],[1374224400000,19.8],[1374228000000,20.6],[1374231600000,21.4],[1374235200000,22.1],[1374238800000,22.6],[1374242400000,23.2],[1374246000000,23.5],[1374249600000,23.5],[1374253200000,23.5],[1374256800000,23.1],[1374260400000,23],[1374264000000,22.4],[1374267600000,22],[1374271200000,21.4],[1374274800000,21.2],[1374278400000,20.6],[1374282000000,20.2],[1374285600000,20.3],[1374289200000,20.2],[1374292800000,20],[1374296400000,19.7],[1374300000000,19.3],[1374303600000,19],[1374307200000,18.9],[1374310800000,19],[1374314400000,19.2],[1374318000000,19],[1374321600000,19.7],[1374325200000,19.8],[1374328800000,20.2],[1374332400000,20.6],[1374336000000,21],[1374339600000,21.6],[1374343200000,21.8],[1374346800000,22.1],[1374350400000,22.3],[1374354000000,22.1],[1374357600000,21.5],[1374361200000,21.1],[1374364800000,20.6],[1374368400000,20.1],[1374372000000,19.7],[1374375600000,19.4],[1374379200000,19],[1374382800000,18.6],[1374386400000,18.2],[1374390000000,18.2],[1374393600000,18.6],[1374397200000,19.4],[1374400800000,20.4],[1374404400000,21.6],[1374408000000,22.9],[1374411600000,24.2],[1374415200000,25.4],[1374418800000,26.5],[1374422400000,27.2],[1374426000000,27.8],[1374429600000,28.3],[1374433200000,28.5],[1374436800000,28.4],[1374440400000,27.8],[1374444000000,27.1],[1374447600000,26.2],[1374451200000,25.7],[1374454800000,25],[1374458400000,24.3],[1374462000000,23.8],[1374465600000,23.1],[1374469200000,22.5],[1374472800000,22.1],[1374476400000,22.2],[1374480000000,22.5],[1374483600000,23.1],[1374487200000,23.9],[1374490800000,24.9],[1374494400000,26.1],[1374498000000,27],[1374501600000,27.8],[1374505200000,28.4],[1374508800000,28.9],[1374512400000,29.1],[1374516000000,29.2],[1374519600000,29],[1374523200000,28.7],[1374526800000,28.5],[1374530400000,27.7],[1374534000000,27.3],[1374537600000,26.8],[1374541200000,26.5],[1374544800000,25.9],[1374548400000,25.4],[1374552000000,24.8],[1374555600000,24.1],[1374559200000,23.6],[1374562800000,23.5],[1374566400000,23.8],[1374570000000,24.3],[1374573600000,24.9],[1374577200000,25.5],[1374580800000,25.7],[1374584400000,26.3],[1374588000000,27.3],[1374591600000,28.1],[1374595200000,28.5],[1374598800000,28.9],[1374602400000,29],[1374606000000,29.4],[1374609600000,29.1],[1374613200000,28.9],[1374616800000,28.2],[1374620400000,27.6],[1374624000000,26.9],[1374627600000,26.2],[1374631200000,25.6],[1374634800000,25.1],[1374638400000,24.6],[1374642000000,24.3],[1374645600000,23.7],[1374649200000,23.6],[1374652800000,23.5],[1374656400000,23.9],[1374660000000,24.4],[1374663600000,24.4],[1374667200000,24.3],[1374670800000,24.9],[1374674400000,25.9],[1374678000000,26.3]],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
I have been searching for ways to dynamically control the width of columns by using pointWidth but this gets me into a hole new area of issues, as I am not always sure if there is a combination of columns and splines and what the date range is.
Is there a trick to solve this? I hope I have missed something simple.
I was reading through the API description of Highcharts when I noticed an option to have multiple x axis. Since my problem seemed to be related to scaling on the x axis I decided to give it a go...
I created a new x axis for the line data and it works like a charm. Of course we do not want to see multiple x axis, so a little fiddling with the settings hides it again.
My x axis definition now looks like this:
xAxis: [{
type: 'datetime',
},{
type: 'datetime',
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
opposite: true,
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
}],
On the data series that has 'too many' points I simply added 'xAxis: 1'.
Fiddle here : http://jsfiddle.net/AM4vx/

Categories