CODEWITHSUNDEEP
javascriptangularjshighcharts
mfscannell
mfscannell

Reputation: 11

High Charts Can't hide Pie Chart data labels

I am working on an application using AngularJS and I am using Highcharts to display a pie chart of some data. The problem I am having is that the data labels for each pie slice are not hiding. I have tried the following after googling the topic but it doesn't work. Any suggestions.

$scope.chartConfig = {
        options: {
            chart: {
                type: 'pie'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'All Tickets',
            data: [
                ['Scheduled', 5],
                ['Completed', 8]]
        }],
        title: {
            text: 'Ticket Information'
        }
    };

HTML File

<div id="order-list-graph" class="pull-left">
  <highchart id="ticketHighChart" config="chartConfig" class="span10"></highchart>
</div>

Upvotes: 0

Views: 817

Answers (1)

mfscannell
mfscannell

Reputation: 11

I figured out what to do. I needed to place the plotOptions object within the options object as such:

options: {
  chart: {
    type: 'pie',
    animation: false
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      }
    }
  }
}

Upvotes: 1

Related Questions