3D donut

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A variation of a 3D pie chart with an inner radius added.
        These charts are often referred to as donut charts.
    </p>
</figure>

CSS

#container {
  height: 400px; 
}

.highcharts-figure, .highcharts-data-table table {
  min-width: 310px; 
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
  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],

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