Pie chart

author(s): Torstein Hønsi

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>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Pie charts are very popular for showing a compact overview of a
        composition or comparison. While they can be harder to read than
        column charts, they remain a popular choice for small datasets.
    </p>
</figure>

CSS

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.highcharts-figure {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}

input[type="number"] {
    min-width: 50px;
}

.highcharts-description {
    background: light-dark(#f2f6f2, #323232);
    border-radius: 0 4px 4px 0;
    border-left: 2px solid light-dark(#1d6aff, #fff);
    font-size: 0.8rem;
    font-style: italic;
    padding: 8px 16px;
    margin: 2em 10px 1em;
}

TypeScript

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },

    title: {
        text: 'Support requests'
    },

    palette: {
        light: {
            colors: [
                '#014CE5', '#A5AFB6', '#D6DBDE', '#E8EEF1', '#F5FCFF'
            ]
        },
        dark: {
            colors: [
                '#216AFF', '#AABAC4', '#929FA7', '#818C93', '#697278'
            ]
        }
    },

    tooltip: {
        valueSuffix: '%'
    },

    series: [{
        name: 'Requests',
        // We can show multiple data labels per point
        dataLabels: [{
            format: '{point.name}',
            connectorColor: 'var(--highcharts-neutral-color-80, #333)'
        }, {
            format: '{point.percentage:.0f}%',
            backgroundColor: 'contrast',
            distance: -30, // Placing the label inside
            style: {
                fontSize: '0.9em',
                textOutline: 'none'
            }
        }],
        data: [
            ['Webform', 55],
            ['Call', 17],
            ['Email', 7],
            ['Webchat', 5],
            ['Other', 3]
        ]
    }]
});