从 ngx-line-chart 中删除时间

Question

. Answers to this question are eligible for a +250 reputation bounty. r3plica wants to to this question.

This should be simple, but I can't find it anywhere. My charts have started showing the time in the xAxis like this:

Notice how the points in the line graph all land on a day, so I have no idea why it's showing time at all. The API I am calling returns the data like this:

{
"success":true,
"failure":false,
"error":null,
"result":[
    {
    "brandId":329,
    "brandName":"Lutron",
    "date":"2021-11-06T00:00:00",
    "total":20,
    "numberOfRecipients":38.4413844870790
    },
    {
    "brandId":329,
    "brandName":"Lutron",
    "date":"2021-11-03T00:00:00",
    "total":18,
    "numberOfRecipients":28.8687847799206
    },
    {
    "brandId":329,
    "brandName":"Lutron",
    "date":"2021-11-09T00:00:00",
    "total":14,
    "numberOfRecipients":18.3646815040250
    },
    {
    "brandId":329,
    "brandName":"Lutron",
    "date":"2021-11-07T00:00:00",
    "total":8,
    "numberOfRecipients":11.9368140491344
    },
    {
    "brandId":329,
    "brandName":"Lutron",
    "date":"2021-11-04T00:00:00",
    "total":8,
    "numberOfRecipients":14.0534477877340
    },
    {
    "brandId":329,
    "brandName":"Lutron",
    "date":"2021-11-05T00:00:00",
    "total":16,
    "numberOfRecipients":30.2606736221572
    },
    {
    "brandId":329,
    "brandName":"Lutron",
    "date":"2021-11-08T00:00:00",
    "total":10,
    "numberOfRecipients":13.8163797040256
    }
],
"message":null
}

As you can see, all the dates show midnight and then I use a method to convert these into the series like this:

private createData(name: string, totals: BrandDemoTotals[]): any {
    return {
        name,
        series: totals.map((total: BrandDemoTotals) => {
            return {
                name: new Date(total.date),
                value: total.numberOfRecipients,
            };
        }),
    };
}

Does anyone know how I can get rid of the times?

---

Update 1

I should mention that these times only appear when the screen resolution is wide enough, so they have done it to have more data points, but it's actually giving false data. In the image below, it shows 34 people at 12pm on Friday the 5th. This is not true :(

The chart is simple, it looks like this:

<ngx-charts-line-chart [id]="id" [legend]="legend" [legendPosition]="legendPosition"
    [legendTitle]="legendTitle" [scheme]="colorScheme" [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis" [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel" [timeline]="timeline" [results]="data" *ngIf="!loading && data">
</ngx-charts-line-chart>

And the code that supplies it is this:

@Input() id: string;
@Input() loading = true;
@Input() data: any[];
@Input() title: string;

public docDefinition: any;
public legend = true;
public legendPosition = LegendPosition.Right;
public legendTitle = '';
public showLabels = true;
public animations = true;
public xAxis = true;
public yAxis = true;
public showYAxisLabel = true;
public showXAxisLabel = true;
public xAxisLabel = 'Date';
public yAxisLabel = 'Count';
public timeline = false;

public colorScheme: Color = {
  domain: ['#00c8b7', '#081d4d', '#b24ebe', '#00a4eb'],
  name: 'test',
  group: null,
  selectable: true,
};

Answer 1

I think false data is for your date formatting. the easiest way to format date is using moment.js library. so I use that and change your method:

import moment=require('moment');
  
createData(name: string, totals: any[]): any {
    return {
     name,
     series: totals.map((total: any) => {
        return {
            name: moment(total.date).format('MMMM DD YYYY, h:mm a'),
            value: total.numberOfRecipients,
        };
    }),
  };
}

now name return like November 06 2021, 12:00 am

But if you want disappear xAxis totally, just set public xAxis = false in chart config.

Hope this answer can help you!