I am working with one of the Highcharts examples trying to get it to display percentage values of a hidden series.
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b><br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Total',
data: [1000, 2000, 3000, 4000, 5000, 6000, 10500],
visable: false
}, {
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
For example in the sample code I would like to display the percentage values of Asia, Africa, Europe, America, and Oceania in terms of the series Total. So the first point for Asia would read: "Asia: 50.2%". I would also like the Total series to be completely hidden i.e. not visible in the legends on the bottom. Note that the total does not have to be a series if there is a better way of doing it, it is just the most convenient place to put it.
I think that what you are look for :
...
tooltip: {
shared:true,
formatter:function(){
var myTooltip = '<b>' + this.x + '</b>',
value,
total = 0; // Total will be calculeted from series values
(this.points).forEach(function(item){
total+=item.y; // Total incrementing
});
(this.points).forEach(function(item){
value = ((item.y / total) * 100).toFixed(2);
myTooltip += '<br/>' + item.series.name + ': ' + value + ' %';
});
myTooltip += '<br/><b>Total : ' + total +'</b>'; // Adding total to the tooltip
return myTooltip;
}
},
...
Fiddle
I got what I was looking for using some of what Core972 did. Here it is
tooltip: {
split: true,
formatter:function(){
var myTooltip = '<b>' + this.x + '</b>',
value,
total = [1000, 2000, 3000, 4000, 5000, 6000, 10500];
(this.points).forEach(function(item){
value = ((item.y / total[item.series.data.indexOf( item.point )]) * 100).toFixed(2);
myTooltip += '<br/>' + item.series.name + ': <b>' + value + '%</b>';
});
return myTooltip;
}
},
Related
I'm making a chart of attendance data for a project I'm working on. The data is grouped by week with a stacked column for each event. The columns are stacked by people-group (Adults, Children).
As this graph will be populated by user generated data, with no upper limit on number of people-groups, I've opted to keep the colours the same for all stacks within a column rather than generate a new colour for each new stack.
I want to be able to have the legend display the stack names [Sunday 10.30am, Sunday 6pm etc] with the associated colour, rather than the series names [Adults, Children].
Is this possible, and can it be done in such a way that hovering over each stack in the legend highlights the whole column?
Codepen
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Attendance This Month'
},
xAxis: {
categories: ['04-Apr-2021', '11-Apr-2021', '18-Apr-2021', '25-Apr-2021', '02-May-2021']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Attendance'
}
},
tooltip: {
formatter: function () {
var stackName = this.series.userOptions.stack;
return '<b>' + stackName + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
colors: ['#e64980', '#e64980', '#be4bdb', '#be4bdb', '#18AABF', '#18AABF'],
series: [{
name: 'Adults',
data: [103, 110, 107, 100, 100],
stack: 'Sunday 10.30am'
}, {
name: 'Children',
data: [41, 50, 49, 32, 100],
stack: 'Sunday 10.30am'
},{
name: 'Adults',
data: [100, 108, 105, 96, 75],
stack: 'Sunday 6pm'
}, {
name: 'Children',
data: [20, 31, 29, 3, 50],
stack: 'Sunday 6pm'
},{
name: 'Adults',
data: [0, 0, 0, 0, 5],
stack: 'Wednesday 12pm'
}, {
name: 'Children',
data: [0, 0, 0, 0, 25],
stack: 'Wednesday 12pm'
}]
});
Thanks for your help!
Please can you tell me, is it possible to create relations between bubbles (lines from one bubble to other(s))?
Example:
SE->FL->NL
FL->DE
SE->BE->DE
DE->NL
Demo:
http://jsfiddle.net/2pLog7fw/
Sure, it can be done. One way of creating lines is to set lineWidth to be higher than zero for bubble series.
Live demo: http://jsfiddle.net/kkulig/2d7u7orx/
But this only creates one relation within a series (from the first point to the last one).
The solution here is to create a new scatter series for every relation:
{
data: [
[80.3, 86.1],
[80.8, 91.5],
[80.4, 102.5]
], // SE -> FI -> NL
type: 'scatter'
}, {
data: [
[86.5, 102.9],
[80.4, 102.5]
], // DE -> NL
type: 'scatter'
}
Configuration for all scatter series (plotOptions):
scatter: {
lineWidth: 1, // show the line
marker: {
radius: 0
}
}
Live demo: http://jsfiddle.net/kkulig/x8r6uj5q/
If you want an arrow that shows the direction of the relation you can use the code from this demo: http://jsfiddle.net/kkulig/mLsbzgnp/
This is right answer for my question:
"You can use scatter series to connect bubbles"
https://github.com/highcharts/highcharts/issues/7410
Example
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 15.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 16,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 16,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 18.8,
name: 'SE',
country: 'Sweden'
}]
}, {
type: 'scatter',
lineWidth: 1,
enableMouseTracking: false,
data: [
[95, 95], [86.5, 102.9],
[86.5, null],
[86.5, 102.9], [80.4, 102.5],
[86.5, null],
[86.5, 102.9], [80.3, 86.1]
]
}]
});
Live demo: http://jsfiddle.net/2pLog7fw/1/
I have created a Highcharts spline graph. When I try to hover over the 4th bullet it highlights the 3rd bullet. Also for the two bullets (1st and 2nd) with same x and y value only one tooltip is shown. I want to show two separate tooltips for the same bullets.
var categories = ['Negative', 'Somewhat Negative', 'Neutral', 'Somewhat Positive', 'Positive'];
var series = [{
name: 'Events',
data: [{
x: 28,
y: 2,
title: 'Point 1 X',
desc: 'Point 1 Y'
}, {
x: 28,
y: 2,
title: 'Point 2 X',
desc: 'Point 2 Y'
}, {
x: 34,
y: 2,
title: 'Point 3 X',
desc: 'Point 3 Y'
}, {
x: 34,
y: 3,
title: 'Point 4 X',
desc: 'Point 4 Y'
}, ]
}];
var age = 'Age';
var experience = 'Career';
Highcharts.chart('container',{
chart: {
type: 'spline',
spacingBottom: 15,
spacingTop: 10,
spacingLeft: 0,
spacingRight: 10
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
title: {
text: age
},
min: 15,
max: 70,
tickInterval: 5
},
yAxis: {
title: {
text: experience
},
labels: {
formatter: function() {
return categories[this.value];
}
},
max: 5,
min: 0
},
tooltip: {
formatter: function() {
return '<div style="width: 250px; white-space:normal;"><b>' + this.point.title + '</b><br/>' + this.point.desc + '</div>';
},
useHTML: true
},
legend: {
enabled: false
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: series,
});
The JS Fiddle is :
https://jsfiddle.net/Kartikeshwar/ues15xvu/
I want to create a chart with different series data. I have a poll with several question and every question has different options.
I tried to use this code :
$(function () {
$('#c_chart').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [
'Question 1',
'Question 2',
],
crosshair: true
},
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: [['Option1', 'Option2']],
data: [49.9, 56]
}, {
name: 'Option3',
data: [83.6]
}
]
});});
How can I create this chart like following image:
Chart
my english is basic but, i try to splain rigth?
try to look this links, im not very sure if you need to move something in plotOptions:{} or chart:{}
the other options not draw the chart. i found this links, i'll hope help you
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels
grettins, from mexico :)
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Questions Answers'
},
xAxis: {
categories: ['Question1', 'Question2', 'Question3', 'Question4', 'Question5']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Option Ticked'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>';
}
},
plotOptions: {
column: {
stacking: false
}
},
series: [{
name: 'Option1',
data: [5, 3, 4, 7, 2]
}, {
name: 'Option2',
data: [3, 4, 4, 2, 5]
}, {
name: 'Option3',
data: [2, 5, 6, 2, 1]
}, {
name: 'Option4',
data: [3, 0, 4, 4, 3]
}]
});
});
I have a graph with 2 line series. Points in each series are percent but I get them from the database in this format : 0.24 for 24% , 0.02 for 2% ...
Is there any method for multiply the value by 100 directly in my graph options ? I try to use pointFormat and pointFormatter but my test isn't succesfull...
My graph configuration :
options.evolRes.chart = {
renderTo: 'container_graph',
backgroundColor: '#F1F1F1',
width: $('#container_graph:parent').width(),
height: 700
};
options.evolRes.title = {
text: 'Title',
x: -20
};
options.evolRes.yAxis = [
{
title: {
text: 'Result'
},
labels: {
format: '{value}%'
},
min: 0,
max: 100,
tickInterval: 10
}
];
options.evolRes.xAxis = {
categories: ['T1','T2','T3','T4','T5','T6'],
labels: {
rotation: -45,
y: 20
}
};
options.evolRes.tooltip = {
crosshairs: true,
shared: true,
valueDecimals: 2
};
options.evolRes.series = [
{
name: 'Result X',
data: [0.2, 0.85, 0.63, 0.05, 0.26, 0.85],
yAxis: 0,
type: 'areaspline',
tooltip: {
valueSuffix : '%'
}
},{
name: 'Result Y',
data: [0.25, 0.35, 0.73, 0.05, 0.16, 0.25],
yAxis: 0,
type: 'areaspline',
tooltip: {
valueSuffix : '%'
}
}
]
try out this
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function () {
s += '<br/>' + this.series.name + ': ' +
this.y *100;
});
return s;
},
shared: true
}
sample fiddle :)