I'm trying to set a custom tooltip text for this pie chart. I want the labels of each slice showing on the slice, as well as having a way of getting to them in the hover event so I can do an if/then/else to show some custom data for each slice.
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: '<span style="color: red;">↑↑↑<br>Risk<br> ofInjury</span> ',
align: 'center',
verticalAlign: 'middle',
useHTML:true,
y: -20,
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
}
},
tooltip: {
useHTML: true,
followPointer: false,
formatter: function() {
return this.category + '<br><ul><li>List Item Test</li></ul>';
}
},
series: [{
type: 'pie',
name: 'Factors',
innerSize: '40%',
data: [
['Data 1', 16],
['Data 2',16],
['Data 3',16],
['Data 4', 16],
['Data 5', 16],
['Data 6',16],
]
}]
});
});
http://jsfiddle.net/5bqu7j4e/34/
Use follow code in formatter functin to get labels
formatter: function() {
return '<b>'+ this.point.name +'</b>:<br><ul><li>List Item Test</li></ul>' ;
}
See fiddle Here
Related
Currently i am working on a requirement, which user can click on the plotted area of a semi circle chart and increase the size of the hovered portion of the plotted area in semi cycle chart....I have gone through the Highchart API and come up with an solution, but my code snitpet is not working..can any one help me with this please.
this.chart = new Highcharts.Chart('container',
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
height: 400,
plotShadow: false
},
title: {
text: '98',
style: {
"fontSize": "48px"
},
align: 'center',
verticalAlign: 'middle',
y: 50
},
credits: {
enabled: false
},
tooltip: {
pointFormat: 'Test: <b>{point.percentage:.1f}%</b>',
enabled:false
},
colors: ['#FF0000', '#FFA500', '#FFFF00'],
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -100,
style: {
fontWeight: 'bold',
color: 'white'
}
},
point: {
events: {
click: function (e) {
alert("Clicked");
}
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series:[
{
data: [
{y: 1, name:"", id:"0"},
{ y: 7, name:"", id:"1"},
{ y: 2, name:"", id:"2"}
],
innerSize: '65%',
type: 'pie',
}
]
}
);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Set allowPointSelect property to true:
plotOptions: {
pie: {
allowPointSelect: true
}
}
Live demo: http://jsfiddle.net/BlackLabel/h3xskctp/
I have highcharts bar.
How I can format my datalabel to percent and add text datalabels (how i can reposition this text? It's need me for create vertical version of this bar) ?
In the end, it should turn out like this in a horizontal or vertical solution.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Activity'
},
xAxis: {
categories: ['Activity']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
borderWidth: 0,
stacking: 'normal',
pointWidth: 3,
dataLabels: {
enabled: true,
y: 2,
verticalAlign: 'top',
align: 'left',
color: '#000000',
style: {
textOutline: false
}
}
}
},
series: [{
name: 'One',
data: [10],
color: '#f45b69'
}, {
name: 'Two',
data: [20],
color: '#44bba4'
}, {
name: 'Three',
data: [30],
color: '#ff9f1c'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
To just show the number with a percentage sign behind as well as the series name you can set the dataLabels format like this:
plotOptions: {
series: {
format: '{y} % <br/> {series.name}',
...
}
}
If you want to change how it looks or have more customize-ability you can use formatter instead of format.
Working example: https://jsfiddle.net/ewolden/y5ygdx2a/1/
API on dataLabels.format: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format
I'm trying use two similar javascript in one page, I already differentiate their id name but when I run my app it's always the first declared script that will only work while the second one doesn't.
Example :
<script type="text/javascript">
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#view2').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Persentasi Jumlah Guru Laki Laki Dan Perempuan'
},
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: 'Persentase',
data: [['Perempuan', 70],
['Laki -Laki', 30]
]
}]
});
});
</script>;
<script type="text/javascript">
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#view1').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Persentasi Jumlah Guru Laki Laki Dan Perempuan'
},
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: 'Persentas',
data: [['Perempuan', 50],
['Laki -Laki', 50]
]
}]
});
});
</script>
The code above will only execute the first declared script (#view2) while the second one (#view1) doesn't work. I have no idea what is the problem, and if you can help please and thank you.
For more details, I'm trying to call them within the same page like :
<div class="row-fluid">
<div class="span6" onTablet="span6" onDesktop="span6">
<div id="view1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
<div class="span6" onTablet="span6" onDesktop="span6">
<div id="view2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</div><!--/span-->
Get rid of this code out of the second script:
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
Also, you have ";" after the first closing script tag which will cause it to show up on the page.
Also you can take you #view1 code and put in inside the same script block as #view2 to make it more compact.
I'm trying to add a tooltip with images to a donut pie chart. Is there a way that I can position the tooltip outside of the pie slice?
http://jsfiddle.net/jlai403/6eenxom2/4/
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
useHTML: true,
text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>',
verticalAlign: 'middle',
},
tooltip: {
useHTML: true,
pointFormat: "<img src='{point.customValue}' width='50'/>"
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
useHTML: false,
enabled: false,
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Some Pie Chart',
data: [
{name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'},
{name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'},
{name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'}
],
size: '60%',
innerSize: '50%',
startAngle: 0,
endAngle: 260
}]
});
Am sorry I dont have the reputation to comment so I am adding the updated fiddle here. Do you mean something like this?
http://jsfiddle.net/6eenxom2/6/
Updated js
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
useHTML: true,
text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>',
verticalAlign: 'middle',
},
tooltip: {
useHTML: true,
//pointFormat: "<img src='{point.customValue}' width='50'/>",
formatter:function(){
$('#tooltip').html(this.y + '<img src=' + this.point.customValue + '/>');
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
useHTML: false,
enabled: false,
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Some Pie Chart',
data: [
{name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'},
{name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'},
{name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'}
],
size: '60%',
innerSize: '50%',
startAngle: 0,
endAngle: 260
}]
});});
Using formatter function to display the tooltip information outside the pie slice.
I am attempting to create a Highcharts Semi-circle donut chart in my angular application. I have installed the Highcharts-ng directive. For whatever reason, it appears to be skipping the plotOptions section completely and that is where the start and end angle are set, thereby creating the donut. What I get is a full circle pie chart. Here is my code:
<div ng-app="myapp">
<div ng-controller="myctrl">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
I have created a JSFiddle here:
http://jsfiddle.net/mikemahony/hzdewsx8/
What am I missing?
Highcharts-ng directive needs those properties to go under options.
$scope.highchartsNG = {
options:{
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
}
},
In highchartsNGConfig the options property is a standard highcharts options object. e.g. anything you can pass into `new Highcharts.Chart(options); works here.
This options object is watched for changes. When something changes here the whole chart is recreated.