CODEWITHSUNDEEP
angularhighcharts
watapon1505
watapon1505

Reputation: 5

highcharts display data from different months

I have an highcharts chart where my yAxis is 24 hours of the day and the xAxis is the date . I am facing a problem when I want to display two months on the same chart. for instences with only one month like this:

data:[{
             x:Date.UTC(2020,10,25),
             low:Date.UTC(2020,10,25,20,0,0),
             high:Date.UTC(2020,10,25,22,0,0)
            }]

the chart display the graph perfectly. However, when the data contain more than one month, like here:

{
         type:'columnrange',
         data:[{
             x:Date.UTC(2020,10,25),
             low:Date.UTC(2020,10,25,20,0,0),
             high:Date.UTC(2020,10,25,22,0,0)
            }]
         },
         {
          type:'columnrange',
          data:[{
             x:Date.UTC(2020,11,1),
             low:Date.UTC(2020,11,1,20,0,0),
             high:Date.UTC(2020,11,1,22,0,0)
            }]
        }

the data exist but it is not being displayed on the chart.

here are the chart's options.

this._options={
    chart:{
        type:'columnrange'
        },
    series:[
        {
         type:'columnrange',
         data:[{
             x:Date.UTC(2020,10,25),
             low:Date.UTC(2020,10,25,20,0,0),
             high:Date.UTC(2020,10,25,22,0,0)
            }]
         },
         {
          type:'columnrange',
          data:[{
             x:Date.UTC(2020,11,1),
             low:Date.UTC(2020,11,1,20,0,0),
             high:Date.UTC(2020,11,1,22,0,0)
            }]
        }],
    yAxis:{
          min:Date.UTC(2020,10,25,0,0,0),
          max:Date.UTC(2020,10,25,23,59,59)
          type:'datetime',
          labels:{
               formatter:function(){
                    return dateFormat('%H:%M',this.value);
                }
            }
         opposite:false
         },
    xAxis:{
         minorTickInterval:24*3600*1000,
         min:Date.UTC(2020,10,25),
         max:Date.UTC(2020,11,1),
         type:'datetime',
         labels:{
             align:'center',
             formatter:function(){
                 return dateFormat('%e / %m / %y',this.value);
               }
             }
          }
}

Upvotes: 0

Views: 512

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I reproduced your issue and it seems that the points are outside the range of the min and max values which you have set.

Take a look at this demo: https://jsfiddle.net/BlackLabel/Lgjfhxds/

Upvotes: 0

Related Questions