Donut chart

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 660px;
    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

var colors = Highcharts.getOptions().colors,
  categories = [
    'Chrome',
    'Safari',
    'Edge',
    'Firefox',
    'Other'
  ],
  data = [{
      y: 61.04,
      color: colors[2],
      drilldown: {
        name: 'Chrome',
        categories: [
          'Chrome v97.0',
          'Chrome v96.0',
          'Chrome v95.0',
          'Chrome v94.0',
          'Chrome v93.0',
          'Chrome v92.0',
          'Chrome v91.0',
          'Chrome v90.0',
          'Chrome v89.0',
          'Chrome v88.0',
          'Chrome v87.0',
          'Chrome v86.0',
          'Chrome v85.0',
          'Chrome v84.0',
          'Chrome v83.0',
          'Chrome v81.0',
          'Chrome v89.0',
          'Chrome v79.0',
          'Chrome v78.0',
          'Chrome v76.0',
          'Chrome v75.0',
          'Chrome v72.0',
          'Chrome v70.0',
          'Chrome v69.0',
          'Chrome v56.0',
          'Chrome v49.0'
        ],
        data: [
          36.89,
          18.16,
          0.54,
          0.7,
          0.8,
          0.41,
          0.31,
          0.13,
          0.14,
          0.1,
          0.35,
          0.17,
          0.18,
          0.17,
          0.21,
          0.1,
          0.16,
          0.43,
          0.11,
          0.16,
          0.15,
          0.14,
          0.11,
          0.13,
          0.12
        ]
      }
    },
    {
      y: 9.47,
      color: colors[3],
      drilldown: {
        name: 'Safari',
        categories: [
          'Safari v15.3',
          'Safari v15.2',
          'Safari v15.1',
          'Safari v15.0',
          'Safari v14.1',
          'Safari v14.0',
          'Safari v13.1',
          'Safari v13.0',
          'Safari v12.1'
        ],
        data: [
          0.1,
          2.01,
          2.29,
          0.49,
          2.48,
          0.64,
          1.17,
          0.13,
          0.16
        ]
      }
    },
    {
      y: 9.32,
      color: colors[5],
      drilldown: {
        name:...