This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Set Additional Data to highcharts series
So I have this graph: http://jsfiddle.net/Gg3ZL/
And I want to replace in the tooltip where it currently says "Total Players Online" with new data from another
Array= ['PlayerX, PlayerY, PlayerZ', 'Player1, Player2, Player3'];
etc
So that it matches with the very first result in the first series data entry....
Even better if I didn't have to replace the "Total Players Online: " and instead just had another new entry in the tooltip like "Who's Online: ".
Basically mouse over an entry and see which players were online at that particular time on the tooltip.
Thanks for any help
You can attach the additional data with each point in the series.data as follows
series: [{
name: 'Series 1',
data: [{
y: 2,
players: ['a', 'b']},
{
y: 3,
players: ['a', 'b', 'c']},
{
y: 2,
players: ['x', 'y']},
{
y: 4,
players: ['a', 'b', 'c', 'd']}
]
}]
Now in the tooltip.formatter you can consume the additional data as follows
formatter: function() {
var result = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
$.each(this.points, function(i, datum) {
result += '<br />' + datum.y + ' players online';
$.each(datum.point.players, function() {
result += '<br/>' + this;
});
});
return result;
}
Complex tooltip | Highchart & Highstock # jsFiddle
Related
I have a column chart created using highcharts , where in I am showing list of student names in a class on x axis and average marks obtained on all the quiz he has taken on the y axis. For example student "abc" had scored 50 and 100 on two tests hence his average is 75. I want 75 to be displayed as value on column chart and on the tool tip i want to display "test 1 - 50","test 2 - 100".So inside series object i am passing in an array of average. Same will be done for other students in class.Help appreciated
You can put the test values as custom properties and refer to them in tooltip's formatter function:
series: [{
type: 'column',
data: [{
y: 75,
tests: [50, 100]
}, {
y: 50,
tests: [50, 50]
}]
}],
tooltip: {
formatter: function() {
var str = '';
this.point.tests.forEach(function(test, i) {
str += '<br>test' + (i + 1) + ' ' + test;
});
return str;
}
}
Live demo: http://jsfiddle.net/BlackLabel/t5f43zwn/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
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
I have a 3D stacked column chart.
If there is some larger values in the data, the small values will not be shown in the chart.
As you can see in
http://jsfiddle.net/43pv1a2q/6/
series: [{
name: 'John',
data: [500, 3, 4, 7, 2], //If change 500 to 5, all blocks will be shown
stack: 'male'
}, {
name: 'Joe',
data: [300, 4, 4, 2, 5], //change 300 to 3
stack: 'male'
},
{
name: 'Tom',
data: [500, 3, 4, 7, 2], // change 500 to 5
stack: 'male'
}]
The minPointLength works with bar chart, but not with stacked column chart.
https://api.highcharts.com/highcharts/series.columnrange.minPointLength
How do you set a minimum height for the block in a stacked column?
It seems to be a bug. You can report it here: https://github.com/highcharts/highcharts/issues
Workaround:
I update every point using a new value if its original y value is less than 50 (threshold) and save the original value in realValue property. Then I manually compute the cumulative values for every stack in tooltip.pointFormatter so that the viewer sees proper values:
events: {
load: function() {
var chart = this,
minColHeightVal = 50;
chart.series.forEach(function(s) {
s.points.forEach(function(p) {
if (p.y < minColHeightVal) {
p.update({
y: minColHeightVal,
realValue: p.y
}, false);
}
});
});
chart.redraw();
}
}
// (...)
pointFormatter: function() {
var stackSum = 0,
point = this,
chart = point.series.chart;
chart.series.forEach(function(s) {
s.points.forEach(function(p) {
if (p.x === point.x) {
stackSum += p.realValue ? p.realValue : p.y
}
});
});
return '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': ' + (point.realValue ? point.realValue : point.y) + ' / ' + stackSum;
}
Live demo: http://jsfiddle.net/kkulig/j3toufk9/
The solution might be to set the y-axis to type: logarithmic, like so: http://jsfiddle.net/43pv1a2q/8/
yAxis: {
type: 'logarithmic',
allowDecimals: false,
title: {
text: 'Number of fruits',
skew3d: true
}
},
The only change I've made is to set "type: 'logarithmic' and removed "min: 0". I can't think of any other way to achieve what you're looking for when working with such hugely different numbers.
EDIT: Of course, you can still use "min: X" to set minimum value on the y-axis; I just removed it because it was unnecessary when I wanted minimum to default.
I am attempting to create a donut chart with (long) labels. The container for the chart is small (and dynamic). I keep running into a problem where the labels for the outer chart are cutoff.
series: [{
name: 'Browsers',
data: browserData,
size: '65%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '85%',
innerSize: '65%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
jsfiddle: http://jsfiddle.net/sw99B/
What I am trying to accomplish is the auto pie size, as is the case with simple pies:
series: [{
name: 'Versions',
data: versionsData,
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
jsfiddle: http://jsfiddle.net/4P4D5/
The problem with donuts is that I have to specify the size of the inner & outer donut. This causes the two pies making the donut to have fixed radius. Ideally, I would have the inner pie be a percentage of the outer; and let the outer pie have an auto-size.
Any suggestions on how to accomplish this?
The dataLabels: formatter... is only controlling whether or not to show datalabel for thinner slices. It's not controlling the size of the pie chart. That is being specified by the series:[{size parameter. In your example it's set to 85% of the container which does lead to overflow.
According to the docs
The default behaviour (as of 3.0) is to scale to the plot area and
give room for data labels within the plot area.
If you comment out the size on your example, it does indeed squeeze in the labels but I'm not sure you'll love the look of it.
The following minor patch to highcharts.src.js v4.0.1 achieves the desired behaviour:
--- highcharts.src.orig.js 2014-04-24 08:25:52.000000000 +0000
+++ highcharts.src.js 2014-06-24 13:57:42.957605307 +0000
## -12167,6 +12167,22 ##
positions = [pick(centerOption[0], '50%'), pick(centerOption[1], '50%'), options.size || '100%', options.innerSize || 0],
smallestSize = mathMin(plotWidth, plotHeight),
isPercent;
+
+ /**
+ * Allow a chart (pie) to specify a size relative to another series. In
+ * that case, simply copy the center position of the parent, and scale
+ * the radius.
+ */
+ if ( options.relativeSize ) {
+ parentPositions = chart.series[options.relativeSize.parentSeries].center;
+ positions[0] = parentPositions[0];
+ positions[1] = parentPositions[1];
+ positions[2] = options.relativeSize.size * parentPositions[2];
+
+ return map(positions, function (length, i) {
+ return positions[i]
+ });
+ }
return map(positions, function (length, i) {
isPercent = /%$/.test(length);
Then, when configuring the donut:
series: [{
name: 'Browsers',
data: browserData,
center: ['50%', '50%'],
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
relativeSize: {
parentSeries: 0, // index of parent series
size: 0.75 // 75% of parent pie
}
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? ''+ this.point.name +': '+ this.y +'%' : null;
}
}
}]
Note that the parent (outer) pie must be explicitly centered in the container, otherwise in certain cases the two pies may not be concentric.
Also, requiring the index of the series to be specified is clearly not ideal, but in a tightly controlled graph (as is a donut), it seems to do the job.
Unfortunately this option is not available, so I advice you to post your request on the uservoice
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/