I am new to Highchart. I have struggled in displaying more info in tooltip for a column chart.
I have the following categories:
Apple, Orange, Pear
I have the following series:
[["40%", 2], ["40%", 2], ["60%", 3]]
I am trying to show tooltips as something similar to the following. This is jsfidle demo: http://jsfiddle.net/mddc/qyc4v7fr/5/
Apple
2 selections, 40%
How can I do this?
Thanks and regards.
Figured out the answer myself. Use the following for tooltip, jsfiddle http://jsfiddle.net/mddc/qyc4v7fr/6/
tooltip: {
formatter: function () {
return this.x + '<br/>' + this.y + ' selections, <b>' + this.key + '</b>';
}
}
Hope this helps others.
Related
Highcharts: I have a shared tooltip with 3 default bullets. I need to add custom information to the 3rd bullet (or series).
I need Bullet C to show its default value, but also show what percentage it is of Bullet B. In the screenshot below, Bullet C would say: "Good Condition: 3,448 (32% of Assessed).
My question is 2 parts:
How do I customize only the third bullet tooltip?
How do I find out what percentage of Bullet B is represented by Bullet C? (in my example, 3,448 is 32% of 10,697, but how do i find that using highcharts?)
Update: This code formats the bullet and partially answers my first question (except it's missing the comma for thousands format):
return '<span style="color:' + this.series.color + '">● </span>' + this.series.name + ':<b>' + this.y + '</b><br/>';
You can define individual tooltip options for a series, in your case you need to use pointFormatter function, for example:
series: [..., {
...,
tooltip: {
pointFormatter: function() {
var series = this.series.chart.series,
percentage = Highcharts.numberFormat(
this.y / series[1].points[this.index].y * 100,
2
);
return '<span style="color:' +
this.color + '">●</span> ' +
this.series.name + ': <b>' +
Highcharts.numberFormat(this.y, 0) +
'</b> Percentage: ' + percentage + '%<br/>'
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4955/
API Reference:
https://api.highcharts.com/highcharts/series.column.tooltip
https://api.highcharts.com/class-reference/Highcharts#.numberFormat
I have created a column chart using Highchart, and would like to add additional text and value to the tooltip, without using the point.y or point.x and i am not trying to work out the sum/avg, its a self-generated value and text.
Any suggestion please.Please see highlighted example
Declare tooltip options with formatter function:
options: {
...,
tooltip: {
formatter: function () {
return 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>'
+ '<br/>' + 'Extra data: <b>' + this.point.extra + '</b>';
},
}
}
And define series data like below:
data:[
{
y: 49.9,
extra: 49.9
},
{
y: 71.5,
extra: 71.5
},
...
],
See jsfiddle code here
No problem doing this with Area chart, but can't find a way to do it for scatter charts. Used http://jsfiddle.net/uZXPR/1/ as a starting point but it's only 1 series and has no special formatting. I've tried numerous stabs in the dark but no luck so far. I could submit all those failed attempts here but I think it'd be quicker to start from http://jsfiddle.net/uZXPR/1/ and just add what's needed.
There are some indications that others are having problems with multiple series scatter chart tooltips, but of course particulars are different in every case.
Here's a snippet of how I do it with Area chart (the gNs.format* functions are just local homegrown formatting routines):
tooltip: {
formatter: function() {
var s = '<b>' + gNs.formatDate(new Date(this.x), '%Y-%M-%d') + '</b>';
$.each(this.points, function(i, point) {
s +='<br/>' +
'<span style="color:' + point.series.color + '">' + point.series.name + '</span>' +
': ' +
gNs.formatSeconds2HMS(point.y); });
return s;
},
shared: true
},
I have a series of points under a single series and I want the tooltip to display all the points in the series but my tooltip displays the top and bottom points selected and does not display the remaining points through the tool tip.How to fix this ?
http://jsfiddle.net/#&togetherjs=7IfUNtFkAE
In the above fiddle,I have the tooltip displaying values for the top and bottom points for apple series ,hovered over in the fiddle.How will i make it such that middle points are also displayed when i hover over them ?
As Paweł Fus pointed out in the comment, the data is not well prepared for highcharts.
So I have converted it from basic line chart to Scatter plot with line.
Scatter plot with line
http://jsfiddle.net/S8wzF/1/ OR http://jsfiddle.net/S8wzF/2/
Reference:
http://www.highcharts.com/demo/scatter
http://www.highcharts.com/demo/combo-regression
Original fiddle with highcharts usage issues
Add useHTML for tooltip when HTML formatting is in use.
shared is not needed and thus return statement of formatter is modified accordingly.
tooltip: {
useHTML: true,
formatter: function () {
return '<b>' + this.x + '</b><br/>' + 'fruit_id' + ': ' + this.point.fruit_id + '<br/>' + 'Values' + ': ' + this.point.y + '<br/>' + 'Mean' + ': ' + this.point.mean + '<br/>' + 'Median' + ': ' + this.point.median + '<br/>' + 'Min' + ': ' + this.point.min + '<br/>' + 'Max' + ': ' + this.point.max + '<br/>'
}
}
Original code contains Javascript problems (Unrelated to highcharts)
The series add data incorrectly as it is inside the loop.
Put this segment of code outside "for loop".
series.push({
data: data,
type: 'line',
color: '#000',
marker: {
symbol: 'circle'
},
showInLegend: false
});
Can someone post an example of a custom aggregate method in highchart?I want to create a custom aggregate method that groups the following points into a single point with the tool tip ?
I have an array that has the following data
array1 :['apple',2,4,10,12.5]
I want the above array to be represented in a single grouped point with a tool tip
that shows as follows
apple
no of apples : 2
min:4
max:10
mean:12.5
I would process the data to get it into a format highcharts recognizes and then add the extra data to the point object. You can reference that extra data in the tooltips formatter function:
$(function () {
var input = [['apple',2,4,10,12.5],
['pear',1,5,10,12],
['orange',3,4,10,13.5],
['grape',4,4,10,11.5]],
data = [],
categories = [];
for (i=0;i<input.length;i++) {
categories.push(input[i][0]);
data.push({x: i,
y: input[i][1],
myMin: input[i][2],
myMax: input[i][3],
myMean: input[i][4]});
}
$('#container').highcharts({
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>' +
'No. of ' + this.x + ': ' + this.y + '<br/>' +
'min : ' + this.point.myMin + '<br/>' +
'max : ' + this.point.myMax + '<br/>' +
'mean : ' + this.point.myMean;
}
},
xAxis: {
categories: categories
},
chart: {
marginRight: 50
},
series: [{
data: data
}]
});
});
http://jsfiddle.net/bhlaird/Du5Nw/