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 have two circle pie charts, they're looking good but I need to change the background color of the inner core:
$(document).ready(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
//backgroundColor: 'rgba(255, 255, 255, 0.0)',
//backgroundColor: 'rgba(255, 255, 255, 0.0)',
backgroundColor: '#FCFFC5',
margin: [0, 0, 0, 0],
spacingTop: 23,
spacingBottom: 23,
spacingLeft: 23,
spacingRight: 23,
plotBorderWidth: 1,
//polar: true,
//type: 'inline'
},
exporting: { enabled: false },
credits: {
enabled: false
},
plotOptions: {
size: '100%',
series: {
states: {
hover: {
enabled: false
}
}
},
pie: {
innerSize: 100,
backgroundColor: '#CCC',
depth: 15,
dataLabels: {
connectorWidth: 0
}
}
},
tooltip: {
enabled: false
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
title: {
text: '<div style="background-color:#2cb5e1;">Today WalkIn<br>67<br>Average wait time<br> 02:00</div>',
align: 'center',
verticalAlign: 'middle',
y: 5,
style: {
color: '#000',
fontWeight: 'bold',
fontSize: '28px',
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
},
series: { states: { hover: { enabled: false } } },
series: [{
type: 'pie',
dataLabels: false,
shadow: false,
data: [{
name: '',
y: 7,
color: '#fc525a',
}, {
name: '',
y: 5,
color: '#2cb5e1',
}, {
name: '',
y: 18,
color: '#fc8b4d',
}],
innerSize: '65%'
},
{
type: 'pie',
data: [{
name: '',
y: 7,
color: '#fc525a',
}, {
name: '',
y: 5,
color: '#2cb5e1',
}, {
name: '',
y: 18,
color: '#fc8b4d',
}],
innerSize: '80%'
}]
});
});
yellow color background comes out of the two pie chart circles; instead, I wanted to display the color only where text has been placed
Screenshot
You need to draw a custom shape, for example:
chart: {
...,
events: {
load: function() {
var x = this.chartWidth / 2,
y = this.chartHeight / 2,
r = x > y ? y : x;
this.renderer
.circle(x, y, 0.65 * r)
.attr('fill', '#F0F')
.add()
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/apmvgnb4/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
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
}
}
]
}]
});
See JSFiddle
I want to remove the white space at the top of the highchart, and move the chart to the top of the page and even with the legend on the right hand side.
What's the best way to remove this empty space and/or change the height of the chart?
Thanks
$(function() {
$('#container').highcharts({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: 'transparent'
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
title: {
text: 'Probability of Success<br>Current Plan<br>',
align: 'center',
verticalAlign: 'bottom',
y: -70
},
subtitle: {
text: 'Within Confidence Zone',
align: 'center',
verticalAlign: 'bottom',
y: -30
},
pane: {
center: ['50%','95%'],
size: '80%',
startAngle: -90,
endAngle: 90,
background: {
borderWidth: 0,
backgroundColor: 'transparent',
innerRadius: '90%',
outerRadius: '100%',
shape: 'arc'
}
},
yAxis: [
{
lineWidth: 0,
min: 0,
max: 90,
minorTickLength: 0,
tickLength: 0,
tickWidth: 0,
labels: {
enabled: false
},
title: {
text: '',
useHTML: true,
y: 80
},
pane: 0
}
],
plotOptions: {
series: {
enableMouseTracking: false
},
pie: {
dataLabels: {
enabled: true,
distance: 0,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '100%']
},
gauge: {
dataLabels: {
enabled: false
},
pivot: {
radius: 125,
borderWidth: 2,
borderColor: 'transparent',
backgroundColor: 'white'
},
dial: {
radius: '100%',
backgroundColor: 'gray',
borderColor: 'gray',
baseWidth: 140,
topWidth: 1,
baseLength: '5%', // of radius
rearLength: '5%'
}
}
},
series: [{
"type": "pie",
"name": "Risk",
"innerSize": "85%",
"data": [{
"y": 40,
"name": "",
"color": "#c5e3f0"
}, {
"y": 30,
"name": "",
"color": "#80c3e0"
}, {
"y": 30,
"name": "",
"color": "#037dae"
}]
}, {
type: 'gauge',
name: 'Success',
data: [25],
dial: {
rearLength: 0
}
}],
});
});
I helped you with this same chart yesterday! Welcome back.
Working JSFiddle
There are several key items that govern the placement of elements in this kind of chart.
plotOptions.pie.center should be ['50%', '47%']
pane.center should be ['50%', '47%']
Adjust the second number (the y value) to nudge it a little higher or lower.
Then change your title/subtitle locations like this:
title: {
text: 'Probability of Success<br>Current Plan<br>',
align: 'center',
verticalAlign: 'top',
y: 145
},
subtitle: {
text: 'Within Confidence Zone',
align: 'center',
verticalAlign: 'top',
y: 187
},
Again, you're just changing the y values. Notice that I also changed the verticalAlign to top instead of bottom to get better control over it.
And finally, you'll want to set the height of your <div> container and set it to clip any extra whitespace content:
<div id="container" style="height: 186px; overflow: hidden" class="left-col" ></div>
See the JSFiddle for final results.
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
Move Chart To The Top and get rid of this white space
<div class="wrap">
<div id="container" style="height: 186px; overflow: hidden" class="left-col"></div>
</div>
CODE
$(function() {
$('#container').highcharts({
chart: {
height: 400,
renderTo: 'container',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: 'transparent'
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
title: {
text: 'Probability of Success<br>Current Plan<br>',
align: 'center',
verticalAlign: 'top',
y: 125
},
subtitle: {
text: 'Within Confidence Zone',
align: 'center',
verticalAlign: 'top',
y: 166
},
pane: {
center: ['50%', '47%'],
size: '80%',
startAngle: -90,
endAngle: 90,
background: {
borderWidth: 0,
backgroundColor: 'transparent',
innerRadius: '90%',
outerRadius: '100%',
shape: 'arc'
}
},
yAxis: [{
lineWidth: 0,
min: 0,
max: 90,
minorTickLength: 0,
tickLength: 0,
tickWidth: 0,
labels: {
enabled: false
},
title: {
text: '',
useHTML: true,
y: 80
},
pane: 0
}],
plotOptions: {
series: {
enableMouseTracking: false
},
pie: {
dataLabels: {
enabled: true,
distance: 0,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '47%']
},
gauge: {
dataLabels: {
enabled: false
},
pivot: {
radius: 125,
borderWidth: 2,
borderColor: 'transparent',
backgroundColor: 'white'
},
dial: {
radius: '100%',
backgroundColor: 'gray',
borderColor: 'gray',
baseWidth: 140,
topWidth: 1,
baseLength: '5%', // of radius
rearLength: '5%'
}
}
},
series: [{
"type": "pie",
"name": "Risk",
"innerSize": "85%",
"data": [{
"y": 40,
"name": "",
"color": "#c5e3f0"
}, {
"y": 30,
"name": "",
"color": "#80c3e0"
}, {
"y": 30,
"name": "",
"color": "#037dae"
}]
}, {
type: 'gauge',
name: 'Success',
data: [25],
dial: {
rearLength: 0
}
}],
});
});
I'm creating a polar area chart in Highcharts. I'm having issues with the labels being positioned inside the chart. See an example here:
$('#container').highcharts({
chart: {
polar: true,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title:{
text:''
},
subTitle:{
text:''
},
pane: {
startAngle: 0,
endAngle: 360
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
yAxis: {
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
pointPlacement: 'between',
states: {
hover: {
enabled: true
}
},
dataLabels: {
enabled: true,
format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
style: {
textShadow: false,
width: 150,
fontSize: "16px"
},
}
},
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: borderWidth
},
},
series: [{
showInLegend: false,
type: 'column',
name: 'Column',
data: data
}],
credits: {
enabled: false
}
});
http://jsfiddle.net/c904atb3/
I notice with the pie charts there are options for "distance" but no such option exists for the polar chart. I'd also like to be able to use "connectors" if possible but I don't see this available for polar either. How can I get more control over these labels?
I've had similar problems getting labels to be "pushed" out from the borders of a polar/spider chart. The way I solved this was to use plot bands to put a ring around the outside rim.
My test can be found here: http://jsfiddle.net/brightmatrix/j3v0zstk/
In this case, I added the following line to your yAxis:
plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]
The values I used are merely for illustration. If you wanted the colored wedges in your chart to truly go out to 10, define a max value for your yAxis and have the plot bands cover what would extend past the chart edges.
The zIndex value of "5" makes sure the plot bands sit on top of your chart wedges to give the desired effect.
I hope this is helpful!
I managed to fix it by allowing the labels to extend outside the container, then setting the container to overflow:visible. Not ideal but it works.
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
padding: 50,
useHTML: true,
verticalAlign: 'middle',
format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
style: {
textShadow: false,
width: 250,
fontSize: '22px'
},
}
http://jsfiddle.net/c904atb3/2/
In my production code I added a CSS class to each label based on the name so I can tweak positioning in CSS.
You can set label's coordinates like this:
var data = [{
name: "Label 1",
dataLabels: {
x:100,
y:100
},
y: 10,
color: "#9fe642"
},
http://jsfiddle.net/c904atb3/1/