Highcharts skipping shared tooltip points for large data sets - highcharts

Seems like Highcharts is skipping a few data points in the shared tooltip for high number of data points (2500+).
I am trying to render a dual axis chart with 2500+ data points for 4 series - using Highcharts. I am also using a shared tooltip option to render my custom tooltip html. But at times Highcharts skips 1 or 2 data points in the tooltip. For example, when I slowly hover over each of the points from left to right, then I am supposed to see '1st April' after '31st March'. But instead, I see '2nd April'. Is it a bug? Or am I missing something? (I have verified that all the dates are present in the categories passed to the Highcharts.)
tooltip: {
borderColor: '#ccc',
backgroundColor: 'transparent',
borderWidth: 0,
shadow: false,
shared: true, //show all series values together
useHTML: true,
// hideDelay: 50000,
formatter: function() {
if (props.config.type == 'pie') {
return 'Value : ' + this.y;
} else {
let html = '<div class="fixed-tooltip">';
html += formatTooltipDate(this.x);
if (this.points &&
this.points.length > 1 &&
props.config.type != "combination") { //multiple series*(see note below)
//*combination series are having 1 point, so handled in the else section as single series.
let dateIndex = props.config.data.categories.indexOf(this.x);
console.log(" date ", this.x);
console.log(" dateIndex ", dateIndex);
if (props.config.type == "dual") {
let dualAxisTitles = props.config.dualAxisTitles;
html += formatDualSeriesTooltipData(this.x, dateIndex, this.points, dualAxisTitles);
} else {
html += formatMultiSeriesTooltipData(this.x, dateIndex, this.points);
}
} else { //single series
//for combination charts have a custom tooltip logic
if (props.config.type == "combination") {
let dateIndex = props.config.data.categories.indexOf(this.x);
html += formatMultiSeriesTooltipData(this.x, dateIndex, props.config.data.series);
} else {
let seriesColor = this.points[0].point.series.color;
let seriesName = this.points[0].point.series.name;
let value = this.points[0].y;
html += formatSingleSeriesTooltipData(value);
}
}
html += '</div>';
return html;
}
}
}
Expected to see a tooltip for "1st April" data point, after "31st March". Instead seeing tooltip for "2nd April" data point.

The points are skipped if there is no enough space for them in the plot area (1px for 1 point). The solution is to set a adequate chart width:
chart: {
width: 1000
},
Live demo: http://jsfiddle.net/BlackLabel/yjk0ta43/
API: https://api.highcharts.com/highstock/chart.width

Related

HighChart - show tooltips for null on hover

I have a null value in my HighCharts line chart. I set connectNulls: true so that the line does not disconnect when the data is null. However I cannot hover over that null value. When I try to, it automatically jumps to the nearest non-null point.
Fiddle: https://jsfiddle.net/wmoxLy4r/2/
What I am trying to do is to:
1/ Allow hovering over null values
2/ When hovering over null values, I would like to show the value of the closest non-null value to the left. In this case it would show 129.2.
I thought about imputing the null value with the closest non-null value to its left but then the plot will be flat at that section due to 2 periods with the same values. I want the plot to looks like it does right now. Appreciate any help
You can preprocess your data and calculate the middle points. A null point doesn't have a marker and it's not possible to show a tooltip for it.
const data = [...];
const processedData = data.map((dataEl, index) => {
if (!dataEl) {
return {
y: (data[index - 1] + data[index + 1]) / 2,
isCalculatedValue: true,
marker: {
fillColor: 'red',
radius: 1
}
}
}
return dataEl;
});
By using tooltip.formatter function, you can show the previous point value in a tooltip.
tooltip: {
formatter: function(tooltip) {
let point = this.point;
if (point.isCalculatedValue) {
point = this.series.points[point.index - 1];
}
return "<span style='font-size: 10px'>" + point.category + "</span><br/>" +
"<span style='color:" + point.series.color +
"'>●</span> Line series: <b>" + point.y + "</b><br/>";
}
}
Live demo: https://jsfiddle.net/BlackLabel/nrmgaw6q/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter

show dataLabels or tooltip on Highcharts packed bubble outer circle

How can I show dataLabels or tooltip for outer circle of packedbubble?
For example in Carbon emissions around the world (2014) sample, i need to show a tooltip for each continent, when hovering on them. or if possible show dataLabels for each of them
Notice that the outer circle is just a path without any properties like x, y etc, so it wouldn't work with the Highcharts tooltip feature. The only solution which came to my mind is to create a custom tooltip on mouseover event on this path.
Demo: https://jsfiddle.net/BlackLabel/9gkdfsnj/
Code:
events: {
render() {
var
chart = this,
series = chart.series[0],
graphic = series.parentNode.graphic,
tooltip = document.getElementById('tooltip'),
text;
text = "Sum value: " + Math.floor(series.yData.reduce((a, b) => a + b, 0));
graphic.element.onmouseover = function() {
tooltip.style.visibility = "visible";
tooltip.innerHTML = text;
tooltip.style.left = graphic.x + (tooltip.offsetWidth /2) - chart.plotLeft + 'px';
tooltip.style.top = graphic.y + graphic.height / 2 + 'px'
}
graphic.element.onmouseout = function() {
tooltip.style.visibility = "hidden"
}
}
}
It is just a simple example, feel free to improve it.
Add value key
[{
name: 'Animals',
value: 867,
data: [{
name: 'Lion',
value: 167
}, {
name: 'Croatia',
value: 200
},
{
name: "Dog",
value: 97
}],
}]
Add below lines inside Tooltip
tooltip: {
useHTML: true,
formatter : function(){
let childtooltip = "";
if(this.point != undefined && this.point != null){
if((this.point.name != undefined && this.point.name != null) && (this.point.value != undefined && this.point.value != null)){
childtooltip = `<b>${this.point.name}:</b> ${this.point.value}`;
}
}
if(childtooltip == ""){
return `<b>${this.series.userOptions.name}:</b> ${this.series.userOptions.value}<br>`
}else{
return `${childtooltip}`;
}
}
}
Demo

Highcharts - drawing gridlines only up to the series

I have an areaspline with only one series. The design calls for drawing x-axis gridlines that touch the series and don't extend beyond that. Is it possible to do this? Here's my code to configure the gridlines:
xAxis: {
gridLineWidth: 1,
tickAmount: 30,
lineWidth: 0,
labels: {
enabled: false
},
minPadding: 0
},
Another option (other then 2 mentioned by jlbriggs in a comment on the question) might be to extend Highcharts and change paths of grid lines in a wrapper like:
(function(H) {
var UNDEFINED;
H.wrap(H.Tick.prototype, 'render', function(p) {
p.apply(this, [].slice.call(arguments, 1)); //run original function
if (this.axis.isXAxis && this.gridLine) {
var point = this.axis.series[0].options.data[this.pos],
d = this.gridLine.attr('d').split(' ');
if (point !== UNDEFINED) {
d[2] = this.axis.chart.yAxis[0].toPixels(point);
d = d.join(' ');
} else {
d = ''; //remove if not crossing any point
}
this.gridLine.attr({
d: d
});
}
});
})(Highcharts)
Example: http://jsfiddle.net/69f5z3us/
If a grid line is not crossing any point, then the grid line is removed, but you could change that part of the code if you want to.

Set navigator min zoom

I'm trying to set the min zoom (max range) of my chart. Basically I'm trying to do the opposite of the minRange property. I'm struggling for a while with this problem. I have a "solution", but I don't like it, this solution allow the user to choose a range greater then the "max range", and immediately correct it.
POSSIBLE SOLUTION
$(function() {
var lastMin;
var lastMax;
var maxRange = 12 * 30 * 24 * 3600 * 1000; //12 month
$('#container').highcharts('StockChart', {
scrollbar: {
liveRedraw: false
},
xAxis: {
events: {
afterSetExtremes: function(e) {
var max = this.max,
min = this.min;
if (lastMin && lastMax) {
if(max-min > maxRange) {
if (min < lastMin) {
min = max - maxRange;
} else {
max = min + maxRange;
}
}
}
var x = this;
setTimeout(function(){
x.setExtremes(min,max); //chart xAxis
}, 1);
lastMin = min;
lastMax = max;
}
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
I want to block the user from choosing a range greater than the allowed, in other words, block the navigator when it's too big
I'm also following this issue, I tried all the proposed solution, but I'm having errors ("Uncaught ReferenceError: Highcharts is not defined")
Thanks Sebastian!
I managed to find a solution (fiddle) wrapping the "render" function. Doing that I managed to really set a "min zoom" on the navigator bar.
$(function() {
var lastX0;
var lastX1;
var maxRange = 100; //100 pixels
(function (H) {
H.wrap(H.Scroller.prototype, 'render', function (proceed) {
console.log(arguments)
if(arguments[4] - arguments[3] > maxRange + 2) {
if (arguments[3] < lastX0) {
arguments[3] = lastX0;
} else {
arguments[4] = lastX1;
}
}
proceed.apply(this, [].slice.call(arguments, 1));
lastX0 = arguments[3];
lastX1 = arguments[4];
});
}(Highcharts));
$('#container').highcharts('StockChart', {
scrollbar: {
liveRedraw: true
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
var highchart = $('#container').highcharts();
var extremes = highchart.xAxis[0].getExtremes();
var rangeTotal = extremes.max - extremes.min;
var f = maxRange / $('#container').width();
highchart.xAxis[0].setExtremes(extremes.max - (f * rangeTotal), extremes.max);
});
In the sample code I'm used a fixed amount of pixels, but in my real application i'm making it dynamic. I making this, because I can't use the data grouping property in the software that I'm working, and since the minimum size of a bar in a chart is 1 pixel (obviously) highcharts hide some bars (or points).
I'm setting the minimum zoom so all bar in the displayed range are visible , since the user can't display a higher range in the x Axis the "hidden" bar "problem" (is an awesome feature, but I can't make use of it) won't happen

Pie chart legend shows empty values

Using dot net highcharts and the label formatter to only display certain items in the legend, it displays values that have been returned as ''.
.SetLegend(new Legend { Enabled = true, LabelFormatter = "function() { if (this.y >= 5) { return this.name; } else { return ''; } }" })
You can disable default legend and create your own as HTML. Then you can control which point should be or not displayed.
Example: http://jsfiddle.net/N3KAC/1/
$legend = $('#customLegend');
$.each(chart.series[0].data, function (j, data) {
$legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');
});
$('#customLegend .item').click(function(){
var inx = $(this).index(),
point = chart.series[0].data[inx];
if(point.visible)
point.setVisible(false);
else
point.setVisible(true);
});
The formatter only formats the text that gets displayed - it does not determine whether or not there is a legend entry for a series.
What you need is the showInLegend property, and you will need to run your check on the series object, not on the legend.
Reference:
http://api.highcharts.com/highcharts#plotOptions.series.showInLegend

Resources