Chart not displaying Date correctly

[Charles]

Hi,

I was not able to reproduce the date in the sample found on this documentation. I want my chart date look like the one here https://ej2.syncfusion.com/angular/demos/#/material/chart/overview-chart

See codes and its output below that l have tried when l bind my chart to the server

public data1: DataManager = new DataManager({

url: 'api/salesAPI',

adaptor: new WebApiAdaptor(),

crossDomain:true

});

public layoutColor: string;

public cellSpacing: number[] = [15, 15];

public cellAspectRatio: number = 0.8;

public chartArea: Object = {

border: { width: 0,},

};

//Initializing Primary X Axis

public columnChartprimaryXAxis: Object = {

title: 'Sales Across Years',

labelFormat: 'y',

valueType: 'DateTimeCategory',

intervalType: 'Years',

interval: 1,

majorGridLines: { width: 0 },

lableStyle: { size: '11px' }

};

//Initializing Primary Y Axis

public columnChartprimaryYAxis: Object = {

labelFormat: '{value}%',

lineStyle: { width: 0 },

maximum: 50,

minimum: 0,

interval: 20,

majorTickLines: { width: 0 },

lableStyle: { size: '11px' },

titleStyle: { size: '13px' }

};

public columnChartlegendSettings: Object = {

padding:5,

shapeHeight:8,

shapeWidth:8

};

public columnChartmarker: Object = {

dataLabel: {

visible: true, position: 'Middle', name:'TextMapping',

font: {

color:'#FFFFFF'

}

},

};

public series1Fill: string = '#2485fa'

public series2Fill: string = '#FEC200'

constructor() {

//code

}

<div class="control-section">

<ejs-dashboardlayout [columns]="8" [cellSpacing]='cellSpacing' [cellAspectRatio]='cellAspectRatio'>

<e-panels>

<e-panel [sizeX]="5" [sizeY]="2" [row]="0" [col]="0">

<ng-template #header>

<div class="title" id="header1"> Sales - Yearly Performance div>

ng-template>

<ng-template #content>

<ejs-chart style="height:100%; width:100%" [primaryXAxis]='columnChartprimaryXAxis' [primaryYAxis]='columnChartprimaryYAxis' [chartArea]='chartArea' [legendSettings]=" columnChartlegendSettings" (load)='load($event)'>

<e-series-collection>

<e-series [dataSource]='data1' type='Column' name='Online' xName='Date' yName='Quantity' [marker]='columnChartmarker' [fill]="series1Fill">

e-series>

e-series>

e-series-collection>

ejs-chart>

ng-template>

e-panel>

e-panels>

ejs-dashboardlayout>

div>

Output

Since on the chart is for this one is 2021 and 2022, so the chart should be accumulated into two columns. Kindly assist

Regards

Charles

[Swetha Babu]

Hi Charles,

Greetings from Syncfusion.

We have created an angular application based on your requirement by setting the valueType property in primaryXAxis as DateTime, labelFormat property as yyyy, and intervalType as Years. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/angular-a3xvsv-vekz4q?file=app.component.ts

Code Snippet:

public chartData: Object[] = [

        { x: new Date(2017, 1, 1), y1: 60 },

        { x: new Date(2018, 2, 1), y1: 56 },

        { x: new Date(2019, 3, 1), y1: 71 },

        { x: new Date(2020, 4, 1), y1: 85 },

        { x: new Date(2021, 5, 1), y1: 73 }

    ];

 

public primaryXAxis: Object = {

        valueType: 'DateTime',

        labelFormat: "yyyy",

        intervalType: "Years",

        interval: 1,

        majorGridLines: { width: 0}

    };

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha