Need help removing that grey line coming out of the chart in the grey part of the chart.
http://jsfiddle.net/Y2e5p/
// Build the chart
$('#' + div_id).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: title
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer'
}
},
series: [{
type: 'pie',
name: title,
size: '60%',
innerSize: '40%',
data: [{
y: number,
name: title,
color: color,
dataLabels: {
enabled: true,
color: '#000000',
inside: true,
formatter: function () {
return Math.floor(Number(this.percentage)) + ' %';
}
}
}, {
y: (100 - number),
name: " ",
color: '#AAAAAA',
dataLabels: {
enabled: true
}
}]
}]
});
You can set datalabels for point and in formatter recognise if datalabels should be or not
http://jsfiddle.net/Y2e5p/2/
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled:true,
formatter: function () {
if(this.point.dataLabels.enabled)
return Math.floor(Number(this.percentage)) + ' %';
else
return null;
}
}
}
},
Related
I Have a Pie Chart Whose functionality is working fine right now. The Problem is with its display.When I Hover upon the Pie Chart's one section, The other sections's opacity of the pie chart get low. As shown Below
My Script is Here :
<script type="text/javascript">
var data = <?php echo json_encode($json_data) ?>
data.forEach(function(el) {
el.name = el.label;
el.y = Number(el.value);
});
Highcharts.chart('userpie', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: undefined
},
credits: {
enabled: false
},
exporting: { enabled: false } ,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme &&
Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Users',
colorByPoint: true,
data: data
}]
});
</script>
Am I missing Something ?. Please Help. Thanks in Advance
You can change the opacity property in the inactive state:
plotOptions: {
pie: {
states: {
inactive: {
opacity: 1
}
},
...
}
}
Live demo: http://jsfiddle.net/BlackLabel/05qwthgz/
API Reference: https://api.highcharts.com/highcharts/series.pie.states.inactive.opacity
how to draw hh:mm pie chart using highcharts for bellow table
You could try this approach, we get the total amount of time, then create a highcharts chart from the individual points:
const data = [
{
name: 'Line Clear - Line maintenance',
value: '06:29',
color: '#eef441'
},
{
name: 'Incoming Supply Failure (ICF)',
value: '14:44',
color: '#f44242'
},
{
name: '33 KV Line Breakdown',
value: '02:13',
color: '#41f48b'
},
{
name: 'Line Clear - SS maintenance',
value: '00:10',
color: '#4176f4'
},
{
name: 'Momentary Interruptions',
value: '01:11',
color: '#e541f4'
}
];
var totalTimeSeconds = data.reduce((sum,row) => {
return sum + 1.0*moment.duration(row.value).asSeconds();
}, 0.0);
var dataSeries = data.map((row) => {
return {
name: row.name + " (" + row.value +")",
y: moment.duration(row.value).asSeconds() / totalTimeSeconds,
color: row.color
};
});
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Reason Type'
},
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'
}
}
}
},
series: [{
name: 'Reason',
colorByPoint: true,
data: dataSeries
}]
});
Here's a JSFiddle that demonstrates this: Reason-Chart
*Actually i'am generating pie chart for table using table id.
So i added another column as seconds,generated table like bellow image.
The bellow Script is used to generate pie chart
<div class="row" style="margin-left: 0px;text-align: center;">
<div id="durationGraphcontainer" style="height: 310px; margin: 0 auto;margin-bottom: 10px;width: 100%"></div>
</div>
// Duration Graph
Highcharts.chart('durationGraphcontainer', {
data: {
table: 'durationGraph'
},
chart: {
type: 'pie'
},
title: {
text : 'Inetrruption Reason Type Graph'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Million Units'
},
stackLabels: {
enabled: true,
align: 'center'
}
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left',
layout: 'vertical',
y: 100,
labelFormatter: function() {
return this.name + " - " + this.percentage.toFixed(2) + "%";
}
},
tooltip: {
pointFormat: '<b>{point.percentage:.2f}%</b>',
formatter: function () {
return this.point.name.toUpperCase();
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false,
format: '{point.percentage:.2f} %',
} ,
innerSize: 100,
depth: 45,
showInLegend: true
},
},
series:[
{
type: 'pie',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return this.point.y.toFixed(2);
}
}
},{point: {
events: {
click: function() {
}
}
}
}],
credits: {
enabled: false
}
});*
so this is what I'm trying to acomplish:
Example
What I need is:
Label inside donut chart changing on mouse over
Color depending on data
Styling label to look like the picture
I actually managed to do the mouse over but I can't change the color according to data and place it in the middle
Here is a fiddle: https://jsfiddle.net/9cjxb97a/1/
Here is the code I wrote so far:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
colors: ['red', 'blue', 'green'],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
},
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
})
.css({
color: 'red',
})
.add();
}
chart.lbl
.show()
.attr({
text: this.y + '%'
});
}
}
},
},
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}],
innerSize: '80%'
}],
});
Thanks
Here's your code to display value in between circle.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
exporting:{
enabled:false
},
tooltip: {
enabled:false
},
colors:['red', 'blue', 'green'],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
},
series: {
point: {
events: {
mouseOver: function () {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
})
.css({
color: 'red',
})
.add();
}
chart.lbl
.show()
.attr({
text: this.y + '%'
});
}
}
},
},
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
headerFormat: '',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '<span style="font-size:40px;color:black; font-weight: bold">{point.y}%</span><br><span>50 Kg</span>{point.custom.customParam}',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: this.chart.plotHeight/2
};
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}],
innerSize:'80%'
}],
});
Here is what I achieved so far
http://jsfiddle.net/9r6Lr5gr/3/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
lineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
yAxis: {
gridLineWidth: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function(){
return 'Total: ' + this.total;
}
},
labels: {
enabled: false
}
},
legend: {
reversed: true,
align: 'left'
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 30,
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'none',
fontSize: 15
}
}
}
},
series: [{
name: 'Outstanding (due > 7 days)',
data: [41]
}, {
name: 'Outstanding (due < 7 days)',
data: [32]
}, {
name: 'Overdue',
data: [15]
}]
});
I want to place the bar chart directly above the legend. Also, is it possible the little horizontal line just before the bar chart. Thanks.
Go through comment in code
Fiddle Demo
Highcharts.chart('container', {
chart: {
type: 'bar',
marginBottom: -180, //make charts display at bottom
events: {
load: function () {
// Draw the horizontal line
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
line = ['M', 550, 0, 'L', 0, 0, 'L', 0, 0, 'M', 0, 0, 'L', 5, 0];
ren.path(line)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(10, 335)
.add();
}
}
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
lineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
yAxis: {
gridLineWidth: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function(){
return 'Total: ' + this.total;
}
},
labels: {
enabled: false
}
},
legend: {
reversed: true,
align: 'left'
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 30,
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'none',
fontSize: 15
}
}
}
},
series: [{
name: 'Outstanding (due > 7 days)',
data: [41]
}, {
name: 'Outstanding (due < 7 days)',
data: [32]
}, {
name: 'Overdue',
data: [15]
}]
});
I have a Highcharts pie chart on my page, working fine.
What I would like to do is remove the values displayed on mouseover of the pie and instead display the values statically with dataLabels(?).
I am not that good at JS and have no idea where to start.
See image below for explanation.
$(function() {
$('#total').highcharts({
credits: {
enabled: false
},
data: {
table: document.getElementById('datatable_total'),
switchRowsAndColumns: true,
endRow: 1
},
chart: {
type: 'pie'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -20
}
}
});
});
$(function () {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br>{point.y}</br>',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Europe',
y: 50
}, {
name: 'Africa',
y: 25
}, {
name: 'Australia',
y: 18
}, {
name: 'US',
y: 7
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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; height: 400px; max-width: 600px; margin: 0 auto"></div>