I'm trying to have my tooltips display my y value instead of the percentage they currently do. For example, when hovering over Yellow, the tooltip reads 22.6%. It should instead read 91.5 yellow skittles.
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: { text: 'Skittles By Color' },
subtitle: { text: '15.4 oz (437 g) Bag' },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' },
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'Color %',
data: [
{ name: 'Green', y: 64, sliced: true, selected: true, color: '#00ff00'},
{ name: 'Purple', y: 71, color: '#660066' },
{ name: 'Red', y: 88.0, color: '#dd0000' },
{ name: 'Orange', y: 91, color: '#ff6600' },
{ name: 'Yellow', y: 91.5, color: '#ffff00' }
]
}]
});
});
jsfiddle
Do you see the tooltip section in your code? That's what you need to change:
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
...should be...
pointFormat: '<b>{point.y} skittles</b>'
As demonstrated here: http://jsfiddle.net/jpotLvt7/11/.
When you have problems like this in the future, I'd recommend looking in your code to see if there are any parts that have names relevant to your issue. In this case, it wasn't too hard to find. You wanted to change the tooltip text, and there was a tooltip { ... } part of your code.
Related
There is an overlapping issue when I tried to draw two yAxis.plotLines on column chart.
The label of plotLines has been covered/overlapped by columns.
Please see the screenshot as below
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy',
height: 400
},
title: {
text: null
},
xAxis: [{ // Suppier names xAxis
max: 9.3,
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
labels: {
rotation: -90,
}
}],
yAxis: [{ // Primary yAxis (Sales)
title: {
text: '<span class="axis-label">Sales Value (AED)</span>',
useHTML: true,
style: {
color: '#89A54E'
}
},
min: 0,
max: 190234
}, { // Secondary yAxis (Margin %)
title: {
text: '<span class="axis-label">Margin</span>',
useHTML: true
},
labels: {
format: '{value}%'
},
opposite: true,
min: 0,
max: 22,
alignTicks: false,
gridLineWidth: 0,
plotLines: [{
value: 11.66000,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: '11.66%',
align: 'right',
style: {
color: 'red'
}
}
}]
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointWidth: 25
},
column: {
colorByPoint: true
},
line: {
dataLabels: {
enabled: true,
format: '{y}%',
style: {
fontWeight: 'bold',
color: '#000000',
}
//style: 'background-color:rgba(255,0,0,0.5);'
//backgroundColor: '#FEFEFE',
//shadow: true
}
}
},
series: [{
name: 'Sales Value',
color: '#FFA500',
type: 'column',
data: [104833.6400, 38023.0500, 53165.2200, 21674.0000, 37098.4700, 42679.6700, 23127.3300, 34588.5000, 33380.0000, 15453.0000],
tooltip: {
valuePrefix: 'AED'
}
}, {
name: 'Margin After Discount (%)',
color: 'lightblue',
yAxis: 1,
data: [12.10, 22.10, 9.40, 13.40, 10.90, 10.60, 9.70, 8.50, 8.00, 11.90],
tooltip: {
valueSuffix: '%'
}
}]
});
});
So, my question is, is there a way to allow overlapping in this case? However, I don't want to change the max value of xAxis.
Here is my testing link:testing link
Thanks
You need to add zIndex to plot lines like you did for the first line - Fiddle
It looks like you are using CSS properties in Javscript.
I am not familiar with the package you are using, but there is usually an 'opacity' property that can define the element's visibility.
For example,
Set the opacity of the red textbox to 0. This will make it invisible.
When you want to see it, set the opacity to 1.
The bars on top are automatically set to 1, because every element has opacity 1 by default.
plotLines: [{
value: 11.66000,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: '11.66%',
align: 'right',
style: {
color: 'red',
opacity: 0
}
}
I want to get the total data per categories. The point.stackTotal only gives the total of the active data.
From the code example I pasted, I would like to know the total consumption per fruit. So even if I clicked Joe's name on the legend on upper right part (that makes all Joe's information on stacked chart inactive), I'd still know the total consumption of Apple (and any other fruits) of John, Jane, and Joe on mouseover each bar categories so apparently, what I am looking for is not the point.stackTotal.
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
I think that you should be able to show the total value for all visible and hidden columns for your category using stackLabels.formatter function. You can get more information about stackLabels in Highcharts API:
http://api.highcharts.com/highcharts/yAxis.stackLabels.formatter
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
var x = this.x,
value = 0;
series = this.axis.series;
Highcharts.each(series, function(s) {
value += s.userOptions.data[x];
});
return value;
}
}
Here you can see very simple example how you can achieve something similar to required chart:
http://jsfiddle.net/h8f30uwo/
Best,
My code is here
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
{
name: 'FireFox',
y: 15.8
}
]
}]
});
});
In ToolTip
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}
I want to write
tooltip: {
pointFormat: '{series.data.name}: <b>{point.percentage:.1f}%</b>'
}
its Not Working please some one help me
I am following this link
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/
try this point.name should help
demo
tooltip: {
pointFormat: '<b>{point.name}</b>: <b>{point.percentage:.1f}%</b>'
},
I adivce you to use formatter, which allows to customise content. Custom parameter will be kept in point.options.name
http://api.highcharts.com/highcharts#tooltip.formatter
I'd like to use a background image for each of my pie chart's slices. Is this possible in High Charts? I can't find an option to specify a background image for each slice. Here's a simple fiddle I put together: http://jsfiddle.net/3KyeL/ (just putting this here in case it makes life easier for someone who knows what to do):
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
title: {
align: 'center',
text: 'The Foo Bar',
style: {
color: '#9EA7B6'
},
verticalAlign: 'bottom',
y: 15 // TODO: compute this
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
distance: -100,
enabled: true,
color: '#FFFFFF',
format: '<strong>{point.name}</strong>: {point.percentage:.1f} %'
},
center: ['50%', '50%']
}
},
series: [{
data: [{
name: 'Foo',
y: 25
}, {
name: 'Bar',
y: 50
}, {
name: 'Foobar',
y: 25
}],
type: 'pie'
}]
});
});
Try to use pattern plugin: http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill
For example: http://jsfiddle.net/kVwGn/
<script src="https://rawgithub.com/highslide-software/pattern-fill/master/pattern-fill.js"></script>
...
series: [{
type: 'pie',
data: [{
y: 35,
color: {
pattern: 'http://highcharts.com/demo/gfx/pattern1.png',
width: 6,
height: 6
}
}, {
y: 15,
color: {
pattern: 'http://highcharts.com/demo/gfx/pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
}]
The following example is located at jsfiddle with the following link. http://jsfiddle.net/KWqU2/2/
Both Highcharts have a backgroundColor set within the chart options configuration.
The problem seems to be that no matter what I set the backgroundColor property to, the second chart defaults to the default and ignores whatever setting I have specified. My goal is to have both chart backgrounds transparent. I have tried backgroundColor:null, backgroundColor:'Transparent', backgroundColor:'rgba(255,255,255,0.1)' nothing seems to work.
Any ideas would be appreciated.
Here's the code for both charts:
var chart;
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
chart: {
backgroundColor:'#000000',
size:'100%'
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 3],
['Opposes You', 1],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});
var chart2;
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container2').highcharts({
chart2: {
backgroundColor:'Transparent',
size:'100%'
},
legend:{
enabled: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 3],
['Opposes You', 10],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});
You are doing it wrong, chart2 is not an option. Change this :
$('#container2').highcharts({
chart2: {
backgroundColor:'Transparent',
size:'100%'
},
...
});
To this :
$('#container2').highcharts({
chart: {
backgroundColor:'Transparent',
size:'100%'
},
...
});
See the updated jsFiddle