JSFiddle - React, Tailwind, and code Playground
by Max Shu
HTML
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 2000px; height: 100px; margin: 0 auto"></div>JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: ''
},
xAxis: {
categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
labels: {
enabled: false
}
},
yAxis: {
// type: 'datetime',
// categories: ['1 модуль', '2 модуль', '3 модуль', '4 модуль', '1 модуль', '2 модуль', '3 модуль', '4 модуль', '1 модуль', '2 модуль', '3 модуль', '4 модуль', '1 модуль', '2 модуль', '3 модуль', '4 модуль'],
title: {
text: ''
},
labels: {
// align: 'right',
},
min: 0,
//startOnTick: false,
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
align: 'left',
style: {
fontWeight: 'normal',
textShadow: 'none',
color: 'white'
},
formatter: function () {
return this.y === this.point.low ? this.series.name : '';
},
}
},
columnrange: {
grouping: false
},
},
tooltip: {
headerFormat: '{series.name}<br>',
// pointFormat: '{point.low:%Y.%m.%d} - {point.high:%Y.%m.%d}'
pointFormat: ''
},
series: [{
name: 'Английский язык (2 пары в неделю)',
data: [{
x: 0,
low: 0,
high: 2
}, {
x: 0,
low: 2,
high: 4
}, {
x: 0,
low: 4,
high: 6
}, {
x: 0,
low: 6,
high: 8
}, {
x: 0,
low: 12,
high: 14
...