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