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/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<button id="switch_button">Количество студентов</button>

JavaScript

$(function () {
	$('#container').highcharts({
		chart: {
			type: 'bar'
		},
		title: {
			text: 'Как студенты НИУ ВШЭ (Москва) сдали экзамен IELTS на втором курсе в 2014 г.'
		},
		subtitle: {
			text: 'по факультетам, % от сдавших'
		},
		xAxis: {
			categories: ['Факультет социальных наук', 'Факультет бизнеса и менеджмента', 'Факультет экономических наук', 'Факультет гуманитарных наук', 'Факультет коммуникаций, медиа и дизайна', 'Факультет права', 'Московский институт электроники и математики', 'Факультет компьютерных наук', 'Факультет мировой экономики и мировой политики', 'Факультет математики'],
		},
		yAxis: {
			title: {
				text: ''
			}
		},
		tooltip: {
			pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:,.0f} чел.</b> ({point.percentage:.1f}%)<br/>',
			shared: true
		},

		plotOptions: {
			bar: {
				stacking: 'normal',
			}
		},
		series: [{
			name: 'Отлично',
			data: [77, 40, 105, 60, 70, 59, 13, 24, 18, 6]
		}, {
			name: 'Хорошо',
			data: [174, 176, 168, 152, 110, 139, 72, 83, 40, 33]
		}, {
			name: 'Удовлетворительно',
			data: [76, 104, 49, 58, 64, 29, 82, 27, 17, 8]
		}, {
			name: 'Неудовлетворительно',
			data: [7, 7, 1, 5, 12, 3, 28, 1, 2, 0]
		}, {
			showInLegend: false,
			stacking: 'percent',
			name: '  В процентах',
		}]
	});
});

$(function () {
    // the button action
    var chart = $('#container').highcharts(),
    $button = $('#switch_button');
    $button.click(function () {
    	var series = chart.series[4];
    	if (series.visible) {
    		series.hide();
    		$button.html('В процентах');
    	} else {
    		series.show();
    		$button.html('Количество студентов');
    	}
    });
});