Highcharts Demo

author(s): Grzegorz Blachliński

by shelukhin89

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>

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

CSS

body{background-color:#ccc;}
#container {
    width: 300px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        style: {'fontFamily': 'Roboto, Arial, sans-serif',},
    },
    title: {
        text: null
    },
    credits: {enabled: false},
		exporting: {enabled: false},
    legend: {enabled: false},
    tooltip: {
        headerFormat: '',
        pointFormat: '<span>{point.name}: {point.z}</span>'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                style: {
                    fontWeight: '500',
                    color: 'rgba(0, 0, 0, 0.87)',
                    fontSize:'12px',
                },
                format: '<span><b style="font-size:18px;">{point.y}</b><br>{point.name}</span>',
            },
            slicedOffset: 2,
            startAngle: -45,
            center: ['50%', '50%'],
        },
    },
    series: [{
        minPointSize: 10,
        innerSize: '125px',
        size: '190px',
        zMin: 0,
        connectNulls: true,
        data: [{
            name: 'побед',
            y: 12,
            z: 4,
            color: '#53e078',
            sliced: true,
            borderWidth:2,
            borderColor:'#53e078',
        }, {
            name: 'ничьих',
            y: 12,
            z: 1,
            color: '#ffffff',
            sliced: true,
            borderWidth:2,
            borderColor:'#53e078',
        }, {
            name: 'поражений',
            y: 24,
            z: 1,
            color: 'transparent',
            sliced: true,
            borderWidth:2,
            borderColor:'transparent',
        }]
    }]
});