Hide Data Labels in Pie Chart below 400px width - Highcharts

2
votes

I'm trying to use the new responsive options in Highcharts to hide data labels on a pie chart when the charts width gets below 400px.

My responsive code is as follows:

responsive: {
   rules: [{
       condition: {
           maxWidth: 300
       },
       plotOptions: {
           pie: {
               allowPointSelect: true,
               cursor: 'pointer',
               dataLabels: {
                   enabled: false,
                   format: '<b>{point.name}</b>:{point.percentage:.1f} %',
                   style: {
                       color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                   }
               }
           }
       }
   }]
}

and is meant to set the dataLabels enabled to false below 400px. I've attempted this here http://jsfiddle.net/chv4ux0z/ but to no avail, does anyone know what I'm doing wrong, I've followed the Highcharts examples but just cant seem to get this right?!

1
javascriptjqueryhighcharts

1 Answers

4
votes

I think that you should be able to add your plotOptions inside responsive.rules.chartOptions object. Then your chart should work correctly: http://api.highcharts.com/highcharts/responsive.rules.chartOptions

  responsive: {
    rules: [{
      condition: {
        maxWidth: 400
      },
      chartOptions: {
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: false,
              format: '<b>{point.name}</b>:         {point.percentage:.1f} %',
              style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
              }
            }
          }
        }
      }
    }]
  }

Live example: http://jsfiddle.net/chv4ux0z/2/