CODEWITHSUNDEEP
javascripthighcharts
r mk r
r mk r

Reputation: 299

Remove the border around the pie chart in high charts

How to remove the border around the pie chart.

enter image description here

I tried the following options but it didn't work :

plotOptions.pie.borderWidth: 0
plotOptions.pie.borderColor: '#f2f2f2' it also didn't work.

Here is the full code : 

$('#PreQualifiedChart').highcharts({
    chart: {
        plotBackgroundColor: '#f2f2f2',
                plotBorderWidth: 0,
                        plotShadow: false,
                        height: 300,
                    widht: 250,
                },
     credits: {
            enabled: false
     },
     exporting: {
         buttons: {
             contextButton: {
                 enabled: false
             }  

         }
     },
     title: null,
     tooltip: {
                headerFormat: '',
                    pointFormat : '{point.name}: <b>{point.y} ({point.percentage:.1f}%)</b>'
            },
     plotOptions: {
                pie: {
                dataLabels: {
            enabled: true,
                        distance: -50,
                        style: {
                            fontWeight: 'bold',
                                color: '#f2f2f2',
                                textShadow: '0px 1px 2px black'
                                }
                                },
                center: ['50%', '50%'],
                borderWidth: 0,
                borderColor: '#f2f2f2'
                     }
                                },
      series: [{
                                    dataLabels: {
                                enabled: false,
            },
                            type: 'pie',
                            name: '',
                                innerSize: '50%',
                        data: [
                    {
            name: 'Submitted All Docs',
            y: SAD,
            color: '#4B99D2',
                    labels: {
                enabled: false
                },
                },
                {
                    name: 'Submitted Missing Docs',
                    y: SMD,
                        color: '#e5a34a',
                            labels: {
                        enabled: false
                },
                },
                {
                    name: 'Not Submitted',
                    y: NS,
                    color: '#844b03',
                    labels: {
                    enabled: false
                },
                }
            ]
            }]
                        });

Upvotes: 1

Views: 2536

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I think that you can use marginTop, marginBottom etc. in your case. Here you can find information about this parameters in Highcharts API:

http://api.highcharts.com/highcharts#chart.marginTop http://api.highcharts.com/highcharts#chart.marginBottom http://api.highcharts.com/highcharts#chart.marginLeft http://api.highcharts.com/highcharts#chart.marginRight

Here you can find an example how your chart may work with this approach:

chart: {
      marginTop: 0,
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      plotBackgroundColor: '#f2f2f2',
      plotBorderWidth: 0,
      plotShadow: false,
      height: 200,
      widht: 150,
    },

http://jsfiddle.net/pe4csrr7/3/

Another idea is to use backgroundColor instead of plotbackgroundColor, here you can see an example how it may work: 

chart: {
  backgroundColor:'#f2f2f2',
  plotBorderWidth: 0,
  plotShadow: false,
  height: 200,
  widht: 150,
},

http://jsfiddle.net/pe4csrr7/4/

Regards,

Upvotes: 2

Related Questions