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
Below is my code for a Yii 1 highcharts combination graph which includes a pie chart, bar graph and a line graph. For the line graph I want to display the point after doing a simple division by 10 (ie, if the point value is 60 it should display 6 when cursor placed above that point ). But with my below code it is showing as 60/10 instead of 6. Also, I want this division to be done only for the line graph and not for other two graphs. Please help me solve this issue.
<!---Start Combination Chart ----->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=<?php echo json_encode(array_values($subjectList));?>;
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: <?php echo json_encode($passedMarkList);?>//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: <?php echo json_encode($failedMarkList);?>
},
{
type: 'line',
tooltip: {
pointFormat: '<span>{point.name}</span>: <b>{point.y}/10</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
},
{
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: <?php echo json_encode($semesterPassStudents);?>,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: <?php echo json_encode($semesterFailStudents);?>,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: <?php echo json_encode($resultUnPublished);?>,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->
Below is my parsed view page source
<!---Start Combination Chart ----->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=["MA101 - CALCULUS","PH100 - ENGG. PHYSICS","BE100 - ENGG. MECHANICS","BE101-05 - INTRODUCTION TO COMPUTING & PROBLEM SOLVING","BE103 - INTRODUCTION TO SUSTAINABLE ENGG.","EC100 - BASICS OF ELECTRONICS ENGG.","PH110 - ENGG. PHYSICS LAB","EC110 - ELECTRONICS ENGG. WORKSHOP","CS110 - COMPUTER SCIENCE WORKSHOP","U100-2 - MICROPROJECT"];
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: [60,59,61,62,61,62,62,53,59,62]//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: [2,3,1,0,1,0,0,9,3,0] },{
type: 'line',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}/10 %</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: 46,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: 16,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: 2,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->
I have a Piechart made of highcharts plugin,Its working fine and my legend is also working fine.But here the value of 'y' that is 12,10,33 is not showing with my legend.I need to show this value with % for ex: yellow slice-12% ,Red Slice-10% etc.,Below is my code.Thanks in advance.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>
Javascript
$(document).ready(function(){
});
</script>
</head>
<body>
<div id="container" style="height: 400px; width: 500"></div>
<script>
$(function () {
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
height: 450,
width: 450
},
credits: {
enabled: false
},
title: {
text : '',
},
plotOptions: {
pie: {
shadow: false,
borderWidth: 0
}
},
tooltip: {
enabled: false
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'top',
x: 0,
y: 0
},
series: [{
innerSize: '60%',
outerSize: '40%',
showInLegend: true,
data: [
{name: 'Yellow Slice', y: 12, color: 'yellow'},
{name: 'Red Slice', y: 10, color: 'red' },
{name: 'Blue Slice', y: 33, color: 'blue'},
{name: 'Green Slice', y: 20, color: 'green'}
],
dataLabels: {
enabled: false,
}
}]
});
});
You want the dataLabels.formatter. https://api.highcharts.com/highcharts/series.pie.dataLabels
There are also a bunch of settings you can change to adjust the placement and the connector.
https://jsfiddle.net/jsormpjj/
$(function() {
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
height: 450,
width: 450
},
credits: {
enabled: false
},
title: {
text: '',
},
plotOptions: {
pie: {
shadow: false,
borderWidth: 0
}
},
tooltip: {
enabled: false
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'top',
x: 0,
y: 0
},
series: [{
innerSize: '60%',
outerSize: '40%',
showInLegend: true,
data: [{
name: 'Yellow Slice',
y: 12,
color: 'yellow'
},
{
name: 'Red Slice',
y: 10,
color: 'red'
},
{
name: 'Blue Slice',
y: 33,
color: 'blue'
},
{
name: 'Green Slice',
y: 20,
color: 'green'
}
],
dataLabels: {
enabled: true,
formatter: function() {
return this.point.name + ' - ' + this.point.y + '%';
}
}
}]
});
});
I have create graph 3 level drilldown and want to show legend of 3rd level follow with color.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -45,
align: "right",
y: 30,
},
type: "category",
tickWidth: 0
},
yAxis: {
title: {
text: 'Total fruit consumption'
}
},
legend: {
enabled: true,
itemStyle: {
fontSize:'10px'
},
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
reversed:true
},
plotOptions: {
series: {
cropThreshold: 1000,
animation: {
duration: 300
},
cursor: 'pointer',
point: {
events: {
click: function () {
if(this.id)
{
alert(this.id);
}
}
}
}
},
column: {
cropThreshold: 1000,
minPointLength: 3,
animation: false,
stacking: 'normal'
}
},
series: [{
index: 0,
name: 'Tippers',
turboThreshold: 0,
cropThreshold: Infinity,
data: [{
name:'01-Feb-2018',
colorByPoint:true,
y:3,
drilldown:'Tippers-1-2-2018'
}]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
color: 'black',
fontWeight: 'normal'
},
series: [{
name: '01-Feb-2018',
id: 'Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'psb04221',
y: 1,
drilldown:'psb04221/Tippers-1-2-2018'
},{
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Tippers-1-2-2018'
},]
},{
name: '01-Feb-2018',
id: 'Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Trucks-1-2-2018'
},{
name: 'sks913031',
y: 1,
drilldown:'sks913031/Trucks-1-2-2018'
},]
},{
name: 'psb04221 / Tippers 1-February-2018',
id: 'psb04221/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-44',
id: '44',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Tippers 1-February-2018',
id: 'rvd910939/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-21',
id: '21',
y: 1,
type_legend: 'green',
color:'green'
},{
name: '01-February-2018-25',
id: '25',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-27',
id: '27',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Trucks 1-February-2018',
id: 'rvd910939/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-13',
id: '13',
y: 1,
type_legend: 'red',
color:'red'
},{
name: '01-February-2018-26',
id: '26',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'sks913031 / Trucks 1-February-2018',
id: 'sks913031/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-22',
id: '22',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-23',
id: '23',
y: 1,
type_legend: 'green',
color:'green'
},]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
1st drilldown legend show date is correct
2nd drilldown I want to show legend users
3rd drilldown I want to show legend for color filter
Please help me to add legend for show legend filter by color Red , Green and Blue of 3rd drilldown like this image : 3rd Drilldown
I have resolved problem by answer of ppotaczek.
In your example, the third level of drilldown is one series, that is why the legend show only one item. If you want to have multiple legend items on drilldown, you have to have multiple series. You can use drilldown event and addSeriesAsDrilldown method, like in the example below to achieve needed result.
Live demo: http://jsfiddle.net/BlackLabel/amg8234t/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
https://api.highcharts.com/highcharts/chart.events.drilldown
Best regards!
Thank you so much.
I make a funnel with this script
$(function () {
$('#container').highcharts({
chart: {
type: 'funnel',
marginRight: 100
},
title: {
text: 'Sales funnel',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: false
},
neckWidth: '2%',
neckHeight: '0%',
//-- Other available options
//height: pixels or percent
width: '100%'
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Item 1', 15005],
['Item 2', 1681],
['Item 3', 1254],
['Item 4', 1165],
['Item 5', 800],
['Item 6', 60],
['Item 7', 202],
]
}]
});
});
http://jsfiddle.net/fainz777/j7p76n6r/1/
If it possible to make it to this view http://c2n.me/38zvhae ?
Each bar have equal height and only width depends on value.
Thanks for help.
There is no function in Highcharts API to make that chart. Funnel type chart has only one change in width from tapered to straight.
Instead you can try to use area range type chart.
JSFiddle: http://jsfiddle.net/rb4j0unv/
$(function () {
$('#container').highcharts({
chart: {
type: 'arearange',
inverted: true,
zoomType: 'x'
},
legend: {
enabled: false
},
series: [{
data: [{low:-100, high:100, x: 0},{low:-50, high:50, x: 1}]
},{
data: [{low:-50, high:50, x: 1},{low:-40, high:40, x: 3}]
},{
data: [{low:-40, high:40, x: 3},{low:0, high:0, x: 4}]
}]
});
});