I am using ngx-charts-line-chart of "@swimlane/ngx-charts": "^16.0.0" . I have following config.data that will render on line chart.
[
{
"name": "North East Region",
"series": [
{
"name": "2022-06-01",
"value": 2.6296,
"extra": {
"hidden": false
}
},
{
"name": "2022-07-01",
"value": 3.0741,
"extra": {
"hidden": false
}
},
{
"name": "2022-11-01",
"value": 1.8958,
"extra": {
"hidden": false
}
}
],
"extra": {
"hidden": false
}
},
{
"name": "North West Region",
"series": [
{
"name": "2022-06-01",
"value": 2.8889,
"extra": {
"hidden": false
}
},
{
"name": "2022-10-01",
"value": 2.4074,
"extra": {
"hidden": false
}
}
],
"extra": {
"hidden": false
}
},
{
"name": "Pharmacy",
"series": [
{
"name": "2022-07-01",
"value": 2.7907,
"extra": {
"hidden": false
}
},
{
"name": "2022-09-01",
"value": 2.4074,
"extra": {
"hidden": false
}
},
{
"name": "2022-10-01",
"value": 2.1071,
"extra": {
"hidden": false
}
}
],
"extra": {
"hidden": false
}
}
]
HTML
<ngx-charts-line-chart *ngIf="config && config.data"
[autoScale]="true"
[legend]="config.size !== 'small'"
[legendPosition]="'below'"
[results]="config.data"
[roundDomains]="true"
[scheme]="colors"
[showGridLines]="config.size !== 'small'"
[showXAxisLabel]="config.size !== 'small'"
[showYAxisLabel]="config.size !== 'small'"
[timeline]="config.size !== 'small'"
[view]="getView()"
[xAxis]="config.size !== 'small'"
[xAxisLabel]="(config.xAxisLabel||'')|translate"
[xAxisTickFormatting]="dateTickFormatting"
[yAxis]="config.size !== 'small'"
[yAxisLabel]="(config.yAxisLabel||'')|translate"
[yScaleMax]="config.yScaleMax||4"
[yScaleMin]="config.yScaleMin||1"
>
</ngx-charts-line-chart>
Ts
public dateTickFormatting(val: Date | any): string {
try {
return moment(val).format('MMM-DD-YY');
} catch (exception) {
console.error(exception);
return val;
}
}
With above code, I was getting chart like below, where its taking 5 dates and not sorted/ not in order.
I need those dates in sort or in order so I searched and found like if I have data in numbers then those dates on X-axis will be in order so I got below data and frontend code
[
{
"name": "North East Region",
"series": [
{
"name": 1654041600,
"value": 2.6296,
"extra": {
"hidden": false
}
},
{
"name": 1656633600,
"value": 3.0741,
"extra": {
"hidden": false
}
},
{
"name": 1667260800,
"value": 1.8958,
"extra": {
"hidden": false
}
}
],
"extra": {
"hidden": false
}
},
{
"name": "North West Region",
"series": [
{
"name": 1654041600,
"value": 2.8889,
"extra": {
"hidden": false
}
},
{
"name": 1664582400,
"value": 2.4074,
"extra": {
"hidden": false
}
}
],
"extra": {
"hidden": false
}
},
{
"name": "Pharmacy",
"series": [
{
"name": 1656633600,
"value": 2.7907,
"extra": {
"hidden": false
}
},
{
"name": 1661990400,
"value": 2.4074,
"extra": {
"hidden": false
}
},
{
"name": 1664582400,
"value": 2.1071,
"extra": {
"hidden": false
}
}
],
"extra": {
"hidden": false
}
}
]
Ts
public dateTickFormatting(val: Date | any): string {
try {
let formatdt = new Date(1000*val);
let formatdtString = formatDate(formatdt, 'MMM y', 'en-US');
//return moment(formatdt).format('M/yy');
return formatdtString;
} catch (exception) {
console.error(exception);
return val;
}
}
Now chart I am getting is like below, where it shows 8 values (different that earlier) and now its in order but Sep is getting repeated
Question
I am not getting why this is happening. How that chart is taking/rendering those X-axis values ?
On x axis, it should show like Jun-22 Jul-22 Sep-22 Oct-22 Nov-22. How can I get this on that graph? Do I need to make changes in my Data format, in HTML etc?
Please guide and help. Thanks.
