Highcharts 3.08 drilldown with multiple parent series - highcharts

I am making my first drilldown charts with Highcharts, and I just installed version 3.09, in which drilldown has built-in support. The drilldown chart will be part of a page that already contains multiple charts. All charts have 3 series (State, Region, Sub-region) with data populated dynamically.
The problem is that the drilldown module doesn't seem to support multiple parent series. In my case, if I click on a column for a specific series (say, State), then the State series will disappear and its drilldown will appear, but the other series (Region, Sub-region) are still displayed and the graphic doesn't make any sense then. See this jsFiddle: http://jsfiddle.net/jmunger/6bBzt/ .
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'CAT 1',
'CAT2'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [{y:49.9, drilldown:'tokyo 1'}, {y:71.5, drilldown:'tokyo 2'}]
}, {
name: 'New York',
data: [{y:49.9, drilldown:'ny 1'}, {y:71.5, drilldown:'ny 2'}]
}],
drilldown:{
series: [{
id: 'tokyo 1',
data: [{y:39.9, name:'name1'}, {y:31.5, name:'name2'}]
}, {
id: 'tokyo 2',
data: [{y:39.9, name:'name1'}, {y:31.5, name:'name2'}]
},
{
id: 'ny 1',
data: [{y:39.9, name:'name1'}, {y:31.5, name:'name2'}]
}, {
id: 'ny 2',
data: [{y:39.9, name:'name1'}, {y:31.5, name:'name2'}]
}]
}
});
});
How can I make sure that all parent series are hidden when I perform a drilldown, and that they are then restored correctly when I drill up?

It's bug in 3.0.8 and 3.0.9 version of drilldown. It's already fixed on master branch, see: http://jsfiddle.net/6bBzt/1/
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>

Related

Highcharts: Show tooltip anywhere over series value column without using shared:true?

Probably a stupid sounding question, but I want my Highcharts column tooltip to display when I mouseover anywhere above or on the column, but I don't want to use the tooltip shared:true attribute.
I'm doing this because my client has some columns that are tiny compared to their neighbors. It would be nice if the mouseover worked before I got close to the tiny columns.
Screenshot of what I'm trying to ask:
Here is a fiddle.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Find Tauntauns'
},
subtitle: {
text: 'Some site on the web'
},
xAxis: {
categories: [
'Jan'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Tauntauns'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
//shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [7]
}, {
name: 'Hoth',
data: [83.6]
}, {
name: 'London',
data: [48.9]
}, {
name: 'Berlin',
data: [5]
}]
});
Unfortunately, this option is not available from the API for the column series type because the pointTracker functionality works different than for the other series like a line or scatter.
My idea to achieve the wanted result is rendering dummy/transparent rectangles which will trigger the tooltip on mouseover effect.
Demo: https://jsfiddle.net/BlackLabel/3pr4baeq/
events: {
render() {
let chart = this;
chart.series.forEach(s => {
s.points.forEach(p => {
if (p.customRect) {
p.customRect.destroy();
}
p.customRect = chart.renderer.rect(p.barX + chart.plotLeft, chart.plotTop, p.pointWidth, p.shapeArgs.y)
.attr({
//fill: 'transparent',
fill: 'yellow'
})
.add();
p.customRect.element.onmouseover = function() {
chart.tooltip.refresh(p)
}
})
})
}
}
You can change the color of the rendered rectangles to the transparent which will hide them.
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
API: https://api.highcharts.com/highcharts/chart.events.render

Issue with tooltip on Highcharts with multiple series added dynamically

Hello I am currently facing a problem with the tooltip on my chart which adds data dynamically through the use of Series.SetData() function of highcharts.
The issue however is not related to the data which is added I think but with the tooltip everytime I mouse over a point in the graph.
To better understand I will post two screenshots with the issue:
Whenever I mouse over a certain point in the graph the tooltip keeps changing and the values presented are the ones posted in the screenshots. If I drag the mouse away the tooltip that remains on the screen is the second one and I am no longer able to see the Y1 value.
I probably have some bad chart configuration so here is the code of my graph:
$(function () {
// Create the chart for node 1
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'x',
events: {
load: requestDataNode1
},
},
credits: {
enabled: false
},
title: {
text: 'Live Data'
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
yAxis: {
labels: {
formatter: function () {
//return (this.value > 0 ? ' + ' : '') + this.value + '%';
return this.value;
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend:{ enabled: true},
plotOptions: {
series: {
showInNavigator: true
},
spline: {
turboThreshold: 0,
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 2,
split: false
},
navigator: {
series: {
data: []
}
},
});
});
I do not know why this happens , at first I thought it could be related with not having a value for a series for a specific date but then I checked my series as you can see in the screenshots and there is indeed a value for both series.
I thank in advance for your help.
I somehow resolved this issue by adding the shared property in the tooltip property and setting to false, however now I only receive a single value.
Is it possible to keep seeing all values?

Highcharts: basic column chart not showing correct color

Below is my code to display basic column chart.
$(function () {
Highcharts.setOptions({
colors: ['#f89422','#8cc641']
});
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
colorbypoint: true,
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5]
}]
});
});
Though I have given 2 colors in the set options, and colorBypoint: true in plotOptions,
It is showing the same color. Orange.
Any idea? Please refer this fiddle - http://jsfiddle.net/88YSd/
The points are showing the same color as they are in the same series.
You can specify indivual point colors like this:
data: [{y:49.9,color:'#f89422'}, {y:71.5,color:'#8cc641'}]
http://jsfiddle.net/Zhmw2/
An alternative would be to put the two points in separate series
series: [{
name: 'Jan',
data: [49.9]
},{
name: 'Feb',
data: [71.5]
}
http://jsfiddle.net/H5KmK/

How to customize a tooltip number in Highcharts?

I need to make a currency conversion in the tooltip so that it shows both R$ (brazilian Real) and US$ (US Dollar).
The series are in R$ so I need to make some math in the tooltip formatter to show the US$.
But how can I do that? Can anyone help me?
This is the Fidle
This is the code
$(function () {
Highcharts.setOptions({
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
});
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Receita líquida consolidada'
},
legend: {
enabled: false
},
xAxis: {
categories: ['2012', '2011', '2010'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Bilhões'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b> R$ {point.y} Bilhões</b> (US$ {point.y} Bilhões)<br/>',
shared: true
},
plotOptions: {
series: {
fillOpacity: 1
},
area: {
stacking: 'normal',
lineColor: '#384044',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#384044',
}
}
},
series: [{
name: 'Receita líquida consolidada',
data: [35.5, 32.5, 19.4],
color: '#4fc6e0'
}]
});
});
One way to do this is to calculate the US$ values in your data:
series: [{
name: 'Receita líquida consolidada',
data: [{y:35.5,us:77.2}, {y:32.5,us:70.7}, {y:19.4,us:42.2}],
color: '#4fc6e0'
}]
You can then use it on the tooltip like this:
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b> R$ {point.y} Bilhões</b> (US$ {point.us} Bilhões)<br/>',
http://jsfiddle.net/h5JzB/
You can use tooltip formatter http://api.highcharts.com/highcharts#tooltip.formatter and calculate both values.

Single-category column chart in Highcharts 3.0 beta

I am using a single xAxis category and 4 discrete data series (each one containing a single data item). Unfortunately, when I try to construct a simple ColumnChart using Highcharts 3.0 beta, the chart is never displayed:
chartB = new Highcharts.Chart({
chart: {
renderTo: 'containerB',
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan' //Just one category
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9] //One data point for each series element.
}, {
name: 'New York',
data: [83.6]
}, {
name: 'London',
data: [48.9]
}, {
name: 'Berlin',
data: [42.4]
}]
});
Please see http://jsfiddle.net/7CJhf/5/.
A workaround is to append an empty category ('') and a zero value to each series item, but this moves the column set to the left. Is there any proper workaround to create a column chart with Highcharts 3.0 beta, using single data points?
I've encountered this issue before issue 1535 with a stacked column of length 1. This is fixed in the lastest master branch highchart.src.js and highcharts-more.src.js. Try updating the script-references to the raw github references here, and it should work ok.

Resources