High chart items missing in mobile view

Question

I am using 3d dount chart. In desktop view, everything works fine, but, in mobile view, 3 items are missing.

Please help me how can I solved it.

Here is my code:

Highcharts.chart('container-charts', {
    chart: {
      type: 'pie',
      options3d: {
        enabled: true,
        alpha: 45
      }
    },
    title: {
      text: 'Our Curriculam showing with charts'
    },
    credits: {
      enabled: false
  },

  navigation: {
      buttonOptions: {
          enabled: false
      }
  },

    plotOptions: {
      pie: {
        innerSize: 100,
        depth: 45
      }
    },
    series: [{
      name: 'Subject Name',
      data: [
        ['Functional Communication Training', 8],
        ['Brushing and Feeding Training', 8],
        ['Sleep disturbance management', 8],
        ['Managing difficult behavior', 8],
        ['Toilet Training', 8],
        ['Adiel activities in general', 8],
        ['ADHD management', 8],
        ['Speech Therapy', 8],
        ['Occupational Therapy', 8],
    
      ]
    }]
  });

Screenshot in desktop view:

Screenshot in mobile view:

user_10522842 · Answer

You can define different pie innerSize property for particular container widths - that will keep your chart more consistent.

  responsive: {
    rules: [{
      condition: {
        maxWidth: 600
      },
      chartOptions: {
        plotOptions: {
          pie: {
            innerSize: 50,
            depth: 45
          }
        },
      }
    }, {
      condition: {
        maxWidth: 400
      },
      chartOptions: {
        plotOptions: {
          pie: {
            innerSize: 35,
            depth: 45
          }
        },
      }
    }]
  }

Demo: https://jsfiddle.net/BlackLabel/aep7hugw/

API: https://api.highcharts.com/highcharts/responsive.rules

High chart items missing in mobile view

1 Answers