I want to show a chart that looks like a full circle donut. i have attached a screenshot. I dont see any chart with a full circle donut, so which kind of chart can i choose from the demo.
Please advice.
Yup there is. Check this link. This was originally from semi circle and when you remove this startAngle: -90,
endAngle: 90, It will give you the donut.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
]
}]
});
Related
Hi EveryOne I am using HighCharts library to plot charts , i want to achieve below pie chart i couldn't find proper example please help me on this.
You can enable sliced state for the blue point and use properties related with border:
series: [{
showInLegend: true,
allowPointSelect: true,
type: 'pie',
data: [{
y: 45,
color: 'black',
dataLabels: {
enabled: false
}
}, {
y: 55,
color: 'blue',
sliced: true,
borderWidth: 5,
borderColor: 'white',
dataLabels: {
format: '{point.y}%',
distance: -60,
style: {
fontSize: 24
}
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/gnqsuefw/
API Reference: https://api.highcharts.com/highcharts/series.pie.data.sliced
I created the extract pie for you here: https://jsfiddle.net/markwan/qm8xzr93/3/
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: "#f5f5f5",
backgroundColor: '#f5f5f5',
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
enabled: false
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemMarginBottom: 15,
x: 0,
y: 150
},
series: [{
name: 'Members',
colorByPoint: true,
data: [
{
name: 'Total Members: 1.000.000',
y: 450000,
color: "#393f4e",
borderWidth: 1,
borderColor: '#f5f5f5',
dataLabels: {
enabled: false,
}
},
{
name: 'Targeted Members: 550.000',
y: 550000,
sliced: true,
borderWidth: 15,
borderColor: 'white',
color: "#34b9d5",
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.0f}%</b>',
distance: -70,
style: {
fontSize: 30
}
}
}]
}]
});
I am trying to have combined chart to display bar charts below my 2 pie series .
I am trying to push the 3 bars below "Chart Title" and I am not being to achieve this with different parameters like grouppadding in highcharts . First I need to reduce the space between Bars to make it 10 px may be and then need to push the entire bar series after Semidonut Pie .
Anyway to achieve this ...
This is roughly the coding I have :
<HighchartWrapper
chartOptions={{
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotBackgroundColor: null,
plotShadow: false,
height: 400,
width: 650,
},
tooltip: {
formatter: function () {
console.log('In tooltip:', this);
if (this.key === 'yoyfnbrev')
var txt1 = 'YOY Func Rev' + this.y;
return txt1;
},
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '85%'],
size: '160%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
style: {
fontSize: '16px',
color: 'black',
style: {
fontFamily: "'Lato', sans-serif",
},
},
formatter: function () {
if (this.series.name === 'revthisyear')
return (
this.point.y.toFixed(0) + '%'
);
else if (this.series.name === 'revlastyear')
return this.point.y.toFixed(0) + '%';
},
},
},
},
bar: {
groupPadding: 0,
pointPadding: 0,
dataLabels: {
enabled: true,
},
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
opposite: true,
title: {
text: null,
},
labels: {
enabled: false,
},
},
series: [
{
type: 'pie',
name: 'revlastyear',
innerSize: '40%',
data: [20,40,40],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: true,
distance: -140,
},
},
{
type: 'pie',
name: 'revthisyear',
innerSize: '60%',
data: [[10, 70, 20],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: false,
distance: -60,
},
},
{
type: 'bar',
name: 'yoyrev',
// innerSize: '10%',
data: [20, -100, -50],
colors: ['#1a7ead', '#e95326', '#008540'],
pointWidth: 10,
pointPadding: 0,
groupPadding: 0.3,
},
],
}}
/>
I think that a good solution will be to use independent yAxis and xAxis for this bar, set a smaller height for them and change the pie centre values. See:
xAxis: [{
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
}, {
height: '20%'
}],
Demo: https://jsfiddle.net/BlackLabel/jc3fLvt1/1/
API: https://api.highcharts.com/highcharts/series.pie.center
API: https://api.highcharts.com/highcharts/series.bar.yAxis
The simplest solution is to create another chart:
Highcharts.chart('container', {
...,
series: [{
type: 'pie',
...
}]
});
Highcharts.chart('container2', {
...,
series: [{
type: 'bar',
...
}]
});
Live demo: http://jsfiddle.net/BlackLabel/r9yz6qdk/
The goal is to make a bar chart like this one in the picture showing the values in percentage but also in MillionTonnes:
The bars are representing the percentage value. The value of the million tonnes is just extra information. Both values can go at the end of the bar and the percentage should appear first and then the Million Tonnes value. Something like:
49% (49.6 Million Tonnes). How can I make this two values appear at the end of the bar? This is the code I have. TIA
Highcharts.chart('grafica1', {
chart: {
type: 'column',
inverted: true,
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ' '
},
xAxis: {
type: 'category',
labels: {
useHTML: true
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: null,
},
labels: {
enabled: false,
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '({point.y:.1f} Million tones)%'
}
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
inverted: false
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
}
}
}]
},
series: [{
name: 'Production',
colorByPoint: true,
data: [{
name: 'PACKAGING PAPERS<br>AND BOARDS',
y: 49,
color: '#005eb8',
}, {
name: 'CASE MATERIALS',
y: 29.9,
color: '#fff',
borderWidth: 2,
borderColor: '#005eb8'
}, {
name: 'OTHER PACKAGING & PAPER',
y: 14.4,
color: '#fff',
borderWidth: 2,
borderColor: '#005eb8'
}, {
name: 'WRAPPINGS',
y: 4.7,
color: '#fff',
borderWidth: 2,
borderColor: '#005eb8'
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafica1" class="chart1Slide2"></div>
When using the stacking option (Doc) it's possible.
Here a working fiddle
At the top of doughnut charts with only 1 point in the series, there is always a tiny gap between the start and end of the slice:
http://jsfiddle.net/6E2Bx/
credits: {
enabled: false
},
chart: {
plotBackgroundColor: 'pink',
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'See the gap at 0 degrees',
align: 'center',
verticalAlign: 'middle',
y: 0
},
plotOptions: {
pie: {
borderWidth: 0,
dataLabels: {
enabled: true,
distance: -30,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '70%',
data: [
['Full', 1]
]
}
Close up of the gap:
Am I missing some setting here?
I would prefer not to modify the drawing/svg elements directly, I feel like borderWidth: 0 should be handling this.
I want to reduce space between bar chart series data. Below mentioned is the image which gives a clear picture :
Can anyone suggest the best approach to do it?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635],
pointWidth: 22,
}, {
name: 'Year 1900',
data: [133, 156, 947],
pointWidth: 22
}]
});
});
http://jsfiddle.net/fMdk3/5/
The options you want to play with are pointPadding (padding between bars) and groupPadding (padding between seies).
e.g.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0.1,
}
},
e.g. http://jsfiddle.net/BZzWQ/