How to Make Transparent Border Highcharts pie

Question

greetings!

So, I make a chart using highcharts in my html page. It's a donut chart or pie chart. It has a white color for all series, but each series has different opacity depends on the percentage of data. So, if series A has 20% from all data then, it will has 20% transparent white color.

Nah, I want to make space for each slices of series. So what i am doing is set borderWidth of series to 1, and then make it transparent using borderColor: 'rgba(255,255,255,0)'.

But nothing happne to my pie/donut chart.

Is there anyone here have experiences doing this?

Unfortunately Highcharts doesn't support anything like padding for slices. — Kamil Kulig

João Menighin João Menighin · Accepted Answer · 2018-04-14T20:54:07

The border is drawn inside the SVG. It doesn't add any pixels outside the slice. So what is happening is that you draw a transparent border on top of your SVG and then you don't see it. To simulate what you want, you simply have to set the border color the same as the background color:

Highcharts.chart('container', {
    chart: {
        // ...
        backgroundColor: 'black'
    },
    //...
    plotOptions: {
        pie: {
            borderWidth: 5,
            borderColor: 'black'
        }
    }

Here is a working fiddle: http://jsfiddle.net/by7xyr78/6/

Edit

Since your background is an image the border color wouldn't solve it. Unfortunelly, as far as I know, Highcharts does not have an option to set a padding or margin to the pie slices. What you can do to get a result somewhere near what you want is set sliced: true in all your series data:

{
    name: 'Chrome',
    y: 61.41,
    sliced: true,
    color: 'rgba(255, 255, 255, 0.61)',
}

Here is a working fiddle: http://jsfiddle.net/j7krfc32/

How to Make Transparent Border Highcharts pie

1 Answers