JSFiddle - React, Tailwind, and code Playground

by Max Shu

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; max-width: 600px; height: 600px; margin: 0 auto"></div>

JavaScript

$(function () {
    // Create the chart
$('#container').highcharts({
	chart: {
		type: 'pie'
	},
	title: {
		text: ''
	},
	subtitle: {
		text: ''
	},
	plotOptions: {
		series: {
			dataLabels: {
				enabled: true,
				format: '{point.name}: {point.y:,.1f}'
			}
		}
	},

	tooltip: {
		headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
		pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:,.1f} млн. рублей</b><br/>'
	},
	series: [{
		name: 'Структура расходов',
		colorByPoint: true,
		data: [
		{
			name: 'Операционные расходы',
			y: 3261
		}, {
			name: 'Другое',
			y: 3663.805229,
			drilldown: 'Другое'
		}, {
			name: 'Обязательства по оплате труда',
			y: 6380
		}, {
			name: 'Стипендии*',
			y: 385.417
		}, {
			name: 'Резервы',
			y: 270
		}, {
			name: 'Налоги',
			y: 274.37
		}, {
			name: 'Инвестиции (вкл. капитальный ремонт)',
			y: 755.99
		},
		]
	}],
	drilldown: {
		series: [{
			name: 'Другое',
			id: 'Другое',
			data: [
			['Кадровое развитие', 1841],
			['Исследования и разработки', 1510],
			['Развитие образовательных программ', 65.192129],
			['Привлечение талантов', 99.6131],
			['Мероприятия студентов и выпускников', 33],
			['Международная деятельность', 35],
			['Университетские мероприятия', 80]
			]
		}]
	}
});
});