StackedColumn with DateTime XAxis

[Lukas Kubis]

Hi,

I'm having some troubles with Stacked Column Chart. The X axis contains date times from 12:00 AM to 12:00 AM (+1 day), but when the chart is rendered, the labels start from 11:45 PM to 11:45 PM (+1 day). When I change type to Line, or StackingArea the date time values are rendered correctly, from 12:00 AM to 12:00 AM (+1 day)

Sample code:

$("#container").ejChart(

{

  primaryXAxis:

{

 title: { text: 'DateTime' },

 range: { interval: 6},

 intervalType: 'hours',

 labelFormat: 'hh:mm tt',

 valueType: 'datetime'

},

//Initializing Common Properties for all the series

commonSeriesOptions: 

{

 type: 'stackingColumn' // line or stackingArea work fine

},

//Initializing Series

series: 

[

{

 points: [{ x: new Date('7/8/2016 12:00 AM'), y: 900 }, { x: new Date('7/8/2016 12:30 AM'), y: 820 }, { x: new Date('7/8/2016 01:00 AM'), y: 880 }, { x: new Date('7/8/2016 01:30 AM'), y: 725 },

  { x: new Date('7/8/2016 02:00 AM'), y: 765 }, { x: new Date('7/8/2016 02:30 AM'), y: 679 }, { x: new Date('7/8/2016 03:00 AM'), y: 770 }, { x: new Date('7/8/2016 03:30 AM'), y: 770 },

  { x: new Date('7/8/2016 04:00 AM'), y: 465 }, { x: new Date('7/8/2016 04:30 AM'), y: 679 }, { x: new Date('7/8/2016 05:00 AM'), y: 770 }, { x: new Date('7/8/2016 05:30 AM'), y: 770 },

  { x: new Date('7/8/2016 06:00 AM'), y: 565 }, { x: new Date('7/8/2016 06:30 AM'), y: 679 }, { x: new Date('7/8/2016 07:00 AM'), y: 770 }, { x: new Date('7/8/2016 07:30 AM'), y: 770 },

  { x: new Date('7/8/2016 08:00 AM'), y: 765 }, { x: new Date('7/8/2016 08:30 AM'), y: 649 }, { x: new Date('7/8/2016 09:00 AM'), y: 670 }, { x: new Date('7/8/2016 09:30 AM'), y: 270 },

  { x: new Date('7/8/2016 10:00 AM'), y: 765 }, { x: new Date('7/8/2016 10:30 AM'), y: 629 }, { x: new Date('7/8/2016 11:00 AM'), y: 170 }, { x: new Date('7/8/2016 11:30 AM'), y: 799 },

  { x: new Date('7/8/2016 12:00 PM'), y: 765 }, { x: new Date('7/8/2016 01:00 PM'), y: 880 }, { x: new Date('7/8/2016 01:30 PM'), y: 725 },

  { x: new Date('7/8/2016 02:00 PM'), y: 765 }, { x: new Date('7/8/2016 02:30 PM'), y: 679 }, { x: new Date('7/8/2016 03:00 PM'), y: 770 }, { x: new Date('7/8/2016 03:30 PM'), y: 770 },

  { x: new Date('7/8/2016 04:00 PM'), y: 465 }, { x: new Date('7/8/2016 04:30 PM'), y: 679 }, { x: new Date('7/8/2016 05:00 PM'), y: 770 }, { x: new Date('7/8/2016 05:30 PM'), y: 770 },

  { x: new Date('7/8/2016 06:00 PM'), y: 565 }, { x: new Date('7/8/2016 06:30 PM'), y: 679 }, { x: new Date('7/8/2016 07:00 PM'), y: 770 }, { x: new Date('7/8/2016 07:30 PM'), y: 770 },

  { x: new Date('7/8/2016 08:00 PM'), y: 765 }, { x: new Date('7/8/2016 08:30 PM'), y: 649 }, { x: new Date('7/8/2016 09:00 PM'), y: 670 }, { x: new Date('7/8/2016 09:30 PM'), y: 270 },

  { x: new Date('7/8/2016 10:00 PM'), y: 765 }, { x: new Date('7/8/2016 10:30 PM'), y: 629 }, { x: new Date('7/8/2016 11:00 PM'), y: 170 }, { x: new Date('7/8/2016 11:30 PM'), y: 799 },

  { x: new Date('7/9/2016 12:00 AM'), y: 400 }],

name: 'FakeData'

}

],

isResponsive: true,

load:"loadTheme",

title :{text: 'ChartType test'},

size: { height: "600" },

legend: { visible: true }

});

Can you tell me please what I'm doing wrong?

Thanks

Lukas

[Dharanidharan Dharmasivam]

Hi Lukas, 

Thanks for using the Syncfusion product. 

In case of line chart, the starting point will be the tick position, but in case of column type charts (column, stacked column, stackingcolumn100) the tick position will be the midpoint and padding will be added with the start and end points,  so the x axis labels will not start from 12.00AM and ends with 12.00AM. If you need to start from 12.00AM and ends with 12.00AM, then min and max properties respectively have to be specified. But the first and last point will not be fully visible since the tick position is the midpoint. Code snippet for min and max properties are specified below with respect to your sample, 

Code Snippet: 

JS: 

primaryXAxis: 

              { 

                title: { text: 'DateTime' }, 

                range: { min: new Date('7/8/2016 12:00 AM'), max: new Date('7/9/2016 12:00 AM'), interval: 6}, 

                intervalType: 'hours', 

                labelFormat: 'hh:mm tt', 

                valueType: 'datetime', 

                edgeLabelPlacement: "shift" 

              }, 

Screenshot: 

 

Thanks,  

Dharani. 

[Lukas Kubis]

Hi Dharani,

Thanks for the explanation. My charts are displayed correctly now.

Lukas

[Dharanidharan Dharmasivam]

Hi Lukas, 

Thanks for your update, please let us know if you require any further assistance on this. 

 

Regards, 

Dharani.