0

I'm learning how to use highcharts and I have an issue with the xrange type. I'm trying to display a simple graph in a div on my website, however I can't see the graph completely. I have an extremely hard time with datetimes... Isn't it supposed to adjust automatically with my data ?

xAxis has the datetime type, and yAxis categories. I was wondering if the problem could come from my div but I tried various sizes and nothing changed...

Am I forgetting something ? I also tried different formats, but in vain, I just want to adjust the scale so I can see the whole graph

Here's my code (it's very basic right now, I'm trying to understand):

Highcharts.chart('chart_{{ Stm.id }}_{{ rowPse.id }}', {

chart: {
    type: 'xrange'
},
title: {
    text: 'Période des données pour chaque dépôt'
},
xAxis: {
    type: 'datetime'
},
yAxis: {
    categories: [/*'Dépôt 15', 'Dépôt 16'*/],
    reversed: false
},
legend: {
    enabled: false
},
colors: ['orange'],
series: [{
    name: '',
    pointWidth: 15,
    data: [{
        x:  Date.UTC(2018, 5, 4),
        x2: Date.UTC(2018, 5, 10),
        y: 0
    }, {
        x:  Date.UTC(2018, 5, 15),
        x2: Date.UTC(2018, 5, 19),
        y: 0
    }, {
        borderColor: 'black',
        borderWidth: 1,
        color: 'rgba(255, 255, 255, 0.1)',
        x:  Date.UTC(2018, 5, 4),
        x2: Date.UTC(2018, 5, 19),
        y: 0
    }, {
        x:  Date.UTC(2018, 5, 27),
        x2: Date.UTC(2018, 6, 9),
        y: 1
    }, {
        x:  Date.UTC(2018, 6, 14),
        x2: Date.UTC(2018, 6, 21),
        y: 1
    }, {
        borderColor: 'black',
        borderWidth: 1,
        color: 'rgba(255, 255, 255, 0.1)',
        x:  Date.UTC(2018, 5, 27),
        x2: Date.UTC(2018, 6, 21),
        y: 1
    }]
}]

});

I'm very sorry if the question has already been asked, but I didn't find anything. I have no doubt it's a stupid issue.

Thanks !

  • Seems to be working for me; https://jsfiddle.net/ewolden/f00h3pvb/. Can you point out what the issue with that graph is? – ewolden Jun 04 '18 at 13:17
  • Actually, I think it must be a problem with the div size, the graph seems to be well displayed on jsfiddle but on my website it's cut, and it won't adjust. I would like to have something like that: https://jsfiddle.net/ewolden/f00h3pvb/, but it's cut on June 14 - edit: I failed my link, I meant with large gap between the data –  Jun 04 '18 at 13:26
  • Could you provide the HTML code of the chart's container and live demo that reproduces this issue? – Kamil Kulig Jun 05 '18 at 10:16

0 Answers0