Highcharts Donut (torus)

by Ben Clayton

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/data.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>


<style>
	#container .highcharts-title {
		transform: translate(0%, calc(50% - 10px));
	}
</style>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
		title: {
			text: "30",
			floating:true,
			x:0,
			y:0
		},
		chart: {
			type: "pie"
		},
		series : [{
        innerSize: '50%',
    }],

    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                distance: -50,
                style: {
                    fontWeight: 'bold',
                    color: 'white'
                },
								format: '<b>{point.name}</b>: {point.y}'
            },
            startAngle: -180,
            endAngle: 180
        }
    },
		data : {
    	"csv": "Name;Value1;\nIE;1\nFF;2\nChrome;6\n"
  	}
});