Related
This snippet shows both original OHLC and adjusted OHLC data in separate plots:
<html>
<head>
<title>
How to show original values in tooltip?
</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div id="chart-container" style="width: 100%; height: 100%; margin: 0 auto"></div>
<pre id="csv" style="display: none">
date,open,high,low,close,volume,ex_dividend,split_ratio,adj_open,adj_high,adj_low,adj_close,adj_volume
2014-05-30,637.98,644.17,628.9,633.0,20143600.0,0.0,1.0,85.783881043984,86.616199022075,84.562968727173,85.114261733663,141005200.0
2014-06-02,633.96,634.83,622.5,628.65,13191100.0,0.0,1.0,85.243344974207,85.36032666095,83.702413790213,84.529353299948,92337700.0
2014-06-03,628.46,638.74,628.25,637.54,10453900.0,0.0,1.0,84.503805575257,85.886071942748,84.475568616388,85.724717892068,73177300.0
2014-06-04,637.44,647.89,636.11,644.82,11981500.0,0.0,1.0,85.711271721178,87.116396579183,85.532437648341,86.70359913286,83870500.0
2014-06-05,646.2,649.3699,642.61,647.35,10850200.0,0.0,1.0,86.889156291142,87.315386462184,86.406438756191,87.043787256377,75951400.0
2014-06-06,649.9,651.26,644.47,645.57,12497800.0,0.0,1.0,87.386664614072,87.569532538176,86.656537534745,86.804445414535,87484600.0
2014-06-09,92.7,93.88,91.75,93.7,75414997.0,0.0,7.0,87.252202905172,88.362856620685,86.358032540987,88.193434867471,75414997.0
2014-06-10,94.73,95.05,93.57,94.25,62777000.0,0.0,1.0,89.16290378864,89.464098016576,88.071074712372,88.711112446736,62777000.0
2014-06-11,94.13,94.76,93.47,93.86,45681000.0,0.0,1.0,88.59816461126,89.191140747509,87.976951516142,88.344031981439,45681000.0
2014-06-12,94.04,94.12,91.9,92.29,54749000.0,0.0,1.0,88.513453734653,88.588752291637,86.499217335332,86.866297800629,54749000.0
2014-06-13,92.2,92.44,90.88,91.28,54525000.0,0.0,1.0,86.781586924022,87.007482594974,85.539160733786,85.915653518706,54525000.0
2014-06-16,91.51,92.75,91.45,92.2,35561000.0,0.0,1.0,86.132136870035,87.299264503287,86.075662952297,86.781586924022,35561000.0
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
title: {
text: 'Plot Title',
align: 'left',
floating: false
},
exporting: {
enabled: true,
sourceWidth: 900,
sourceHeight: 600
},
legend: {
enabled: false,
floating: true,
verticalAlign: 'top',
align:'center'
},
rangeSelector: {
buttons: [{
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 2,
text: '2y'
}, {
type: 'year',
count: 3,
text: '3y'
}, {
type: 'year',
count: 4,
text: '4y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
credits: {
enabled: false
},
plotOptions: {
series: {
visible: false,
turboThreshold: 0 // Comment out this code to display error
},
ohlc: {
color: 'black'
}
},
data: {
csv: document.getElementById('csv').innerHTML,
firstRowAsNames: false,
startRow: 1,
seriesMapping: [{
x: 0,
open: 1,
high: 2,
low: 3,
close: 4
}, {
x: 0,
open: 8,
high: 9,
low: 10,
close: 11
}, {
x: 0,
y: 9
}, {
x: 0,
y: 10
}]
},
series: [{
name: 'Values',
type: 'ohlc', // bars
visible: true,
// set color in plotOptions
tooltip: {
// set tooltip options here
}
}, {
name: 'Adj_Values',
type: 'ohlc', // bars
visible: true,
// set color in plotOptions
tooltip: {
// set tooltip options here
}
}, {
name: 'Adj_High',
type: 'line', // high
visible: false,
color: 'blue'
}, {
name: 'Adj_Low',
type: 'line', // low
visible: false,
color: 'gray'
}]
});
</script>
</body>
</html>
If possible I want to (1) make the original OHLC plot invisible; (2) plot only the adjusted OHLC bars; and (3) show the original OHLC values in the tooltip attached to the adjusted OHLC bars shown in the plot.
I can find examples of a shared tooltip but no information on the options that would replace the adjusted OHLC with original OHLC data. Alternatively I might want to add original OHLC data to show both original and adjusted in the tooltip associated with the adjusted data plot.
You can disable visible property for the first series and use tooltip's formatter function to find a matched point from the hidden series and show it's values.
tooltip: {
formatter: function(tooltip) {
const originalFormat = tooltip.defaultFormatter.call(this, tooltip);
const point = this.points[0].point;
const originalPoint = tooltip.chart.series[0].points.find(
p => p.x === point.x
);
originalFormat[1] = `<span style="color:black">●</span> <b> ${point.series.name}</b><br/>Open: ${originalPoint.open}<br/>High: ${originalPoint.high}<br/>Low: ${originalPoint.low}<br/>Close: ${originalPoint.close}<br/>`;
return originalFormat;
}
},
series: [{
name: 'Values',
type: 'ohlc',
visible: false
}, {
name: 'Adj_Values',
type: 'ohlc',
visible: true
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/k2mhvdp6/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
I am trying to add anchor tag in tooltip of highstock flags.
I am facing couple of problems with that:
Anchor tags are not displayed in tooltip.
When I try to hover over the tooltip, the tooltip disappears.
My code looks like:
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json', function (data) {
var year = new Date(data[data.length - 1][0]).getFullYear(); // Get year of last data point
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 4
},
title: {
text: 'USD to EUR exchange rate'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
tooltip: {
valueDecimals: 4
}
},{
type: 'flags',
data: [{
x: Date.UTC(year, 11, 1),
title: 'B',
text: 'make me clickable'
}, {
x: Date.UTC(year, 11, 1),
title: 'B',
text: '<a>make me clickable</a>'
}],
shape: 'circlepin',
onSeries: 'dataseries',
width: 16,
tooltip: {
pointFormat: '{point.text}'
} ,
style:{
border:'1px solid green'
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
What am I doing wrong?
You have to set useHTML to true for the tooltip. To easier hover on tooltip, increase hideDelay value and disable stickyTracking on series:
tooltip: {
useHTML: true,
hideDelay: 5000
}
Live demo: http://jsfiddle.net/BlackLabel/ncrgwvzu/
API:
https://api.highcharts.com/highstock/series.line.stickyTracking
https://api.highcharts.com/highstock/tooltip.useHTML
I want to set navigator's position and range programmably in Highstock candlestick chart. By default, navigator's end(left) side indicate end of data series. And also width of navigator is seems like fixed some number of data.
In this picture, I want to set navigator to yellow position. How can I do this?
You need to set the xAxis min and max, to show a specific area on chart load. Can be done like this:
xAxis: {
min: 1330764400000,
max: 1330774400000
},
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/large-dataset.json', function (data) {
// Create a timer
var start = +new Date();
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
if (!window.TestController) {
this.setTitle(null, {
text: 'Built chart in ' + (new Date() - start) + 'ms'
});
}
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
xAxis: {
min: 1330764400000,
max: 1330774400000
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2017'
},
subtitle: {
text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data.data,
pointStart: data.pointStart,
pointInterval: data.pointInterval,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Working JSFiddle example: https://jsfiddle.net/ewolden/axrce6j3/2/
If you want to show a specific area after the chart has been drawn, you can use the setExtremes function like this:
chart.xAxis[0].setExtremes(1330764400000, 1330774400000, true);
API Reference: Axis.setExtremes()
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/large-dataset.json', function (data) {
// Create a timer
var start = +new Date();
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
if (!window.TestController) {
this.setTitle(null, {
text: 'Built chart in ' + (new Date() - start) + 'ms'
});
}
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
xAxis: {
min: 1330764400000,
max: 1330774400000
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2017'
},
subtitle: {
text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data.data,
pointStart: data.pointStart,
pointInterval: data.pointInterval,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
$('#setExtremeButton').click(function() {
$('#container').highcharts().xAxis[0].setExtremes(1330774400000,1350974400000, true)
})
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<button id="setExtremeButton">
Set new min/max
</button>
Working example: https://jsfiddle.net/ewolden/axrce6j3/12/
I have two panes (yAxis:0 and yAxis:1) for two different sets of data series. When I use plotOptions Compare set to Percent, the second pane (yAxis:1) becomes blank (or actually I think the curve is pushed to the very top, but still not visible). If I remove the plotOptions section, then the second pane comes out just like I want it. But then I don't get the first pane the way I want it (normalized so I can see the percentage difference rather than absolute value).
Is there a way to apply the plotOptions only to the first pane / yAxis:0?
window.chart = new Highcharts.StockChart({
chart: {
renderTo : 'container'
},
title: {
text : 'Relative rates for <?=$stock1?>, <?=$stock2?>, and OMX30, and positions taken'
},
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 4,
text: '4y'
}, {
type: 'all',
text: 'All'
}],
selected: 5
},
yAxis: [{
title: {
text: 'Normalized rates'
},
height: 250,
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}, {
title: {
text: 'Positions taken'
},
top: 300,
height: 100,
offset: 0,
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}],
xAxis: {
type: 'datetime',
minRange: 1728000000 //Minimibredden på grafen i ms
},
plotOptions: {
series: {
compare: 'percent'
}
},
series: [{
name : '<?=$stock1?>',
data : json_data,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : '<?=$stock2?>',
data : json_data2,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : 'OMX30',
data : json_data3,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : '<?=$stock1?>',
data : json_data4,
yAxis : 1,
tooltip: {
yDecimals: 1
}
},{
name : '<?=$stock2?>',
data : json_data5,
yAxis : 1,
tooltip: {
yDecimals: 1
}
}]
});
});
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},