JSFiddle - React, Tailwind, and code Playground

by Muzaffar Rasulov

HTML

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

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

CSS

#container {
	min-width: 310px;
	max-width: 800px;
	margin: 0 auto
}

JavaScript

// function getSunburst(data) {
//     var institute = {id: 'institute', parent: '', name: 'institute'}
    data = [
        {id: 'institute', parent: '', name: 'Институт'},
        {id: 'АСУП', parent: 'institute', name: 'АСУП'},
        {id: 'МехФак', parent: 'institute', name: 'МехФак'},
        {id: 'СтройФак', parent: 'institute', name: 'СтройФак'},
        {id: 'ЭкономФак', parent: 'institute', name: 'ЭкономФак'},

        /* АСУП */
        /**
         * Логистика
         Телеком
         АБ
         УЭР
         */
        {id: 'Логистика', parent: 'АСУП', name: 'Логистика'},
        {id: 'Телеком', parent: 'АСУП', name: 'Телеком'},
        {id: 'АБ', parent: 'АСУП', name: 'АБ'},
        {id: 'УЭР', parent: 'АСУП', name: 'УЭР'},

        {id: '3.1', parent: 'АБ', name: 'Баратов Дилшод', value: 3},
        {id: '3.2', parent: 'АБ', name: 'Болтаев Суннатилло', value: 3},
        {id: '3.3', parent: 'АБ', name: 'Бекбаев Гамзат', value: 1},

        {id: '3.4', parent: 'Логистика', name: 'Илесалиев Д.И.', value: 8},
        {id: '3.5', parent: 'Логистика', name: 'Кобулов Жамшид', value: 2},

        {id: '3.6', parent: 'Телеком', name: 'Курбанов Жанибек Файзуллаевич', value: 3},
        {id: '3.7', parent: 'Телеком', name: 'Халиков Абдульхак Абдульхаирович', value: 3},

        {id: '3.8', parent: 'УЭР', name: 'Турсунов Закир', value: 3},

        /**
         * МехФак
         *
         * Локомотивы
         ЭлТех
         ЭлектрТранспорт
         */
        {id: 'Локомотивы', parent: 'МехФак', name: 'Локомотивы'},
        {id: 'ЭлТех', parent: 'МехФак', name: 'ЭлТех'},
        {id: 'ЭлектрТранспорт', parent: 'МехФак', name: 'ЭлектрТранспорт'},

        {id: '3.9', parent: 'Локомотивы', name: 'Аблялимов Олег', value: 7},
        {id: '3.10', parent: 'Локомотивы', name: 'Валиев Мухаммад Шералиевич', value: 2},

        {id: '3.11', parent: 'ЭлектрТранспорт', name: 'Хромова Галина Алексеевна', value: 9},
        {id: '3.12', parent: 'ЭлектрТранспорт', name:...