How to add more data to the chart?

Question

JavaScript

I do not quite understand, but please explain how you can add more data to display in the graph. As shown here , when the button is clicked Add dataset, new data is added. I need to do the same, only I need to display 3 more values ​​side by side on the chart. Only that they are displayed along with the loaded page, without pressing any buttons.
Here is my chart so far, which only displays one value ( density) on the chart, not counting the state_time.
ts:

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { StateService } from '../../../shared/services/state.service';
import { State } from '../../../shared/interfaces';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements AfterViewInit {

  @Input('reports_id') reports_id: string
  @ViewChild('state') stateRef: ElementRef

  constructor(
    private stateService: StateService
  ) { }


  ngAfterViewInit() {
    const stateConfig: any = {
      label: 'Density'
    }

    this.stateService.fetch(this.reports_id).subscribe((data: State[]) => {
      stateConfig.data = data.map(item => item.density)
      stateConfig.labels = data.map(item => item.state_time)
      const stateCtx = this.stateRef.nativeElement.getContext('2d')
      new Chart(stateCtx, createChartConfig(stateConfig))
    }
  )}
}

function createChartConfig({labels, data, label}) {
  return {
    type: 'bar',
    options: {
      scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    }
    },
    data: {
      labels,
      datasets: [
        {
          label, data,
          fill: false
        }
      ],
    }
  }
}