CODEWITHSUNDEEP
javascripthighchartspie-chartdonut-chart
Hermanto51
Hermanto51

Reputation: 13

How to Make Transparent Border Highcharts pie

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?

Upvotes: 0

Views: 2083

Answers (1)

João Menighin
João Menighin

Reputation: 3225

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/

Upvotes: 1

Related Questions