Chart JS Angular how to display list of data in a line chart

Its my first time using any chart in programming so sorry if this is really simple and im just being an idiot. So I have created a really basic chart using ChartJS in angular.

loadChart(): void {
new Chart(this.chart,{
  type:'line',
  data: {
    datasets: [
      {
        data:data:[30, 60, 40, 50, 40, 55, 85, 65, 75, 50, 70],
        label:"Series 1",
        backgroundColor: '#007bff',
        tension: 0.3,
      }
    ],
    labels:['17th',
            '18th',
            '19th',
            '20th',
            '21st',
            '22nd',
            '23rd',
            '24th',
            '25th',
            '26th',
          ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        beginAtZero: true,
      }
    }
  }
})
}

I have a get method to my rest api that responds with a bunch of data such as these detections.

[
{
    "DetectionId": 2,
    "CityId": 2,
    "TimeUpdated": "2018-11-20T21:58:44.767594Z",
    "FPercent": 22,
},
{
    "DetectionId": 3,
    "CityId": 2,
    "TimeUpdated": "2016-11-20T21:58:44.767594Z",
    "Percent": 22,
}
]

How can I add this data to my chart so that it displays each detection as a dot on the line graph. Ideally I would like to plot percent on the Y axis and Timeupdated on the x axis. Any help or advice would be greatly appreciated I've tried a few tutorials but none have worked so far.

Also is there any way I can add an angular Click() to the dots so I can use it for navigating between data.

Thanks for taking your time to read!

You need to map [data] and [type] from the data your are getting from the API.

  <canvas
    baseChart
    [data]="dataFromApi"
    [type]="chartType"
    >
  </canvas>

Since you did not specify what chart type are you using, i'll show you an example for binding DoughnutChart

In order to map your data from API following by chart type, we need to know what types are we using. If you take a look at ChartData<'doughnut'> documentation type you will see that it is typed like this

export interface ChartData<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown
> {
  labels?: TLabel[];
  datasets: ChartDataset<TType, TData>[];
}

From this I know that I can map my response like this

getPhases$(): Observable<[ChartData<'doughnut'>, IPhasesResponse]> {
    return this._phasesService.getPhases$().pipe(
      take(1),
      map((response: IPhasesResponse) => {
        const doughtnutChartLabels = response.results.map(
          (phase: IPhaseResults) => phase.name
        );
        const doughtnutChartDatasets = response.results.map(() => 100);

        const doughnutChartData: ChartData<'doughnut'> = {
          labels: doughtnutChartLabels,
          datasets: [{ data: [...doughtnutChartDatasets] }],
        };
        return [doughnutChartData, response];
      })
    );
  }

Make your chart interactive with events

And for the second part, to make chart interactive you need to use events. You can bind events with chartjs with a methods named chartClick and chartHovered.

  <canvas
    baseChart
    [data]="doughnutChartData"
    (chartClick)="chartClicked($event)"
    (chartHovered)="chartHovered($event)"
    [type]="doughnutChartType"
  >
  </canvas>

And inside your .ts file

  public chartClicked({ event, active }: { event: ChartEvent, active: {}[] }): void {
    console.log(event, active);
  }

  public chartHovered({ event, active }: { event: ChartEvent, active: {}[] }): void {
    console.log(event, active);
  }
Back to Top