highcharts - Rendering the charts as columnrange type -

i have following chart render working times intervalls columnrange , palcing charts close xaxis.

with part of code in code below

chart: {     spacingtop: 0,     paddingtop: 0,     zoomtype: 'x',  }, 

i getting following charts:

https://jsfiddle.net/62jq6zsd/

but not getting right result.

putting code fiddle, can see nothing plotted:

• http://jsfiddle.net/jlbriggs/3d3fuhbb/225/

looking @ data, reason apparent. have data set as;

{   x: 1483358580000,   y: 1 } 

but columnrange series type requires data elements of low , high, optional/inferred x value.

in addition, have points null values x, not work highcharts - there must x value, whether set or inferred.

it's unnecessary - use of null points break line series needed because lines meant continuous; columnrange type has breaks built in.

and finally, have x , y mixed - since inverting chart, axes swap places - x vertical axis, , y horizontal.

if values time, in 1483358580000 above, need specify 2 timestamps - 1 start, , 1 end of each bar segment.

example highcharts demo:

    data: [         [-9.7, 9.4],         [-8.7, 6.5],         [-3.5, 9.4],         [-1.4, 19.9],         [0.0, 22.6],         [2.9, 29.5],         [9.2, 30.7],         [7.3, 26.5],         [4.4, 18.0],         [-3.1, 11.4],         [-5.2, 10.4],         [-13.5, 9.8]     ] 

(in example, x value determined order of data points, , not need set explicitly. in case, need specify x value, since want them on same line)

demo fiddle:

• http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/columnrange/

{{ edit }}

using chart base, here updated version.

code (data based on yours, edited demonstration)

xaxis: {   categories: ['', 'woring time'],   title: {     text: null   },   gridlinewidth: 0 }, yaxis: {     type: 'datetime'     }, series: [{   data: [             [1,1483337940000,1483337950000],             [1,1483337970000,1483337990000],             [1,1483338000000,1483338010000],             [1,1483338030000,1483338070000]         ] }] 

fiddle:

• http://jsfiddle.net/jlbriggs/qdza1032/

{{ edit again comments }}

to reduce space between series, have variety of options

1) reduce height of chart

2) increase width of bar

1/2) both!

3) work axis min/max , minpadding/maxpadding settings, if want 1 side of series , not other.

option one, in fiddle:

• http://jsfiddle.net/jlbriggs/qdza1032/1/

option three:

• http://jsfiddle.net/jlbriggs/qdza1032/2/