How to make pie chart with data border radius in highchart
I am trying to plot a highchart with a data border radius at both ends. For this, I named the rounded corners in tall charts , but I didn't get Round rounds after enabling the script and the redius option in the first data.
<script src="https://rawgithub.com/highslide-software/rounded-corners/master/rounded-corners.js"></script>
borderRadiusTopLeft: 40,
borderRadiusTopRight: 40,
Tried: jsfiddle
My requirements: I have to make the radius of the data border as shown below:
Note:
1. Read round corners only for the first data (both ends) in a highchart series.
2. No white line between the two data is required (see Jsfiddle).
Your suggestion will be appreciated.
source to share
I don't think the pie can have rounded corners without changing the internal Highcharts code. However, you can achieve the desired result with a massive chart with some trickery - this type of chart tends to set rounded / square caps - solidgauge.linecap .
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
yAxis: {
visible: false,
min: 0,
max: 2
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
borderColor: '#0883ce',
borderWidth: 15,
radius: '100%',
innerRadius: '100%'
}
},
series: [{
borderColor: '#b9b9b9',
borderWidth: 14,
data: [1.5]
}, {
data: [0],
enableMouseTracking: false
}, {
data: [1],
linecap: 'square'
}]
};
Live example and conclusion
http://jsfiddle.net/Penstrife/1s8sfqtn/
source to share