Highcharts Demo Chart Chooser Donut Chart

author(s): Mustapha Mekhatria

by Geo George

HTML

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

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

CSS

#container {
    min-width: 310px;
    height: 400px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
   // colors: ['#01BAF2', '#71BF45', '#FAA74B', '#B37CD2'],
    chart: {
        type: 'pie'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    title: {
        text: 'February 2020 Norway passenger auto registrations'
    },
    subtitle: {
        text: 'Source:<a href="https://cleantechnica.com/2020/03/07/pioneering-norway-rises-above-68-plug-in-vehicle-market-share-in-february/">cleantechnica</a>'
    },
    tooltip: {
        enabled: false,
        pointFormat: '{series.name}: <b>{point.percentage:.0f}%</b>'
    },
    plotOptions: {
    series: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false,
                format: '{point.name}: {y} %'
            },
            showInLegend: false
        }
    }},
    series: [{
        name: 'Registrations',
         dataLabels: {
                enabled: false,
                format: '{point.name}: {y} %'
            },
        //colorByPoint: true,
        innerSize: '75%',
        data: [{
            name: 'EV',
            y: 68.1,
             color: {
      linearGradient: {
        x1: 0,
        x2: 1,
        y1: 0,
        y2: 1
      },
      stops: [
        [0, '#00A160'],
        [0.5, 'yellow'],
        [1, '#00A160']
      ]
    }
        }, {
            name: 'Petrol',
            color:'#f2f2f2',
            y: 9.7
        }]
    }]
});