home component ts and html - 2023 Reporting

PHOTO EMBED

Mon Jun 17 2024 13:03:44 GMT+0000 (Coordinated Universal Time)

Saved by @iamkatmakhafola

//TS
import { Component } from '@angular/core';
import {Chart, ChartDataset, ChartType} from 'chart.js';



@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
  
})
export class HomeComponent {
  ngOnInit(): void {
    this.createChart();
  }
  public chart: any;
  createChart(){
    this.chart = new Chart("barChart", {
      type: 'bar',
      data: {
        labels: ['Shirt', 'Jacket', 'Men Tops', 'Men Pants', 
                 'Swimwear', 'Shoes', 'Sleepwear', 'Men Accessories'],
        datasets:[
          {
            label:"2022",
            data: ['446','551','462','158','171','553','566','231'],
            backgroundColor: 'blue'
          },
          {
            label:"2023",
            data: ['623','431','525','306','100','369','417','420'],
            backgroundColor: 'red'
          }
        ]
      }
    });
  }
}
//HTML
<div class="chart-container">
    <h2>Product Sales</h2>
    <canvas id="barChart">{{ chart }}</canvas>
</div>
content_copyCOPY

2023 - home component ts and html: 1.2 In the “home.component.ts”: a. Create a Chart function for bar chart which must run as soon as the page loads the home page. b. Create a function for the bar chart. This should include the data and labels for the bar chart. c. Labels for 2022 should have a blue background color while labels for 2023 should have a red background color. 1.3 In the “home.component.html”: a. The bar chart should have a header titled “Product Sales”. b. Create a container and use angular string interpolation to render the bar chart variable.