x-range chart
by jakub_noga_antsolutions
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
CSS
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
JavaScript
Highcharts.chart('container', {
exporting: {
enabled: false
},
credits: {
enabled: false
},
"drilldown":{
"series":[
{
"id":"gwt-uid-4",
"data":[
]
}
],
"allowPointDrilldown":true
},
legend: {
enabled: false
},
chart: {
type: 'xrange',
},
title: {
text: 'Stany maszyn'
},
"tooltip":{
"positioner":null,
"shared":true,
"enabled":true,
"valueDecimals":2,
"crosshairs":[
false,
false
],
"useHTML":true,
"borderWidth":0,
"backgroundColor":null,
"shadow":false,
"style":{
"padding":0
}
},
xAxis: {
"id":"gwt-uid-5",
"title":{
"text":"",
"style":{
"fontWeight":"normal"
},
"useHTML":true
},
"showFirstLabel":true,
"showLastLabel":true,
"startOnTick":false,
"endOnTick":false,
"labels":{
"maxStaggerLines":1,
"style":{
"fontWeight":"normal"
},
"autoRotationLimit":80
},
"tickPixelInterval":100,
"ordinal":false,
"type":"datetime",
"dateTimeLabelFormats":{
"millisecond":"%H:%M:%S.%L",
"second":"%H:%M:%S",
"minute":"%H:%M",
"hour":"%H:%M",
"day":"%e. %b",
"week":"%e. %b",
"month":"%b \\'%y",
"year":"%Y"
},
"visible":true,
"events":{
}
},
yAxis: {
"id":"gwt-uid-6",
"title":{
"text":"Axis1",
"style":{
"fontSize":"15px",
"fontWeight":"normal"
},
"useHTML":true
},
"startOnTick":false,
"endOnTick":false,
"stackLabels":{
"enabled":false
},
"showLastLabel":true,
"showFirstLabel":true,
"opposite":false,
"labels":{
"style":{
...