Angular Step Area Chart

/* app.component.ts */
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, CommonModule, CanvasJSAngularChartsModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
})
export class AppComponent {
    chartOptions = {
        animationEnabled: true,
        theme: "light2",
        title: {
            text: "Avalanche Events Occurance"
        },
        subtitles: [{
            text: "U.S.A"
        }],
        axisY: {
            title: "Event Count",
            includeZero: true,
        },
        data: [{
            type: "stepArea",
            color: "#64B5F6",
            lineColor: "#0D47A1",
            markerColor: "#0D47A1",
            markerSize: 5,
            dataPoints: [
                { label: "2003", y: 11 },
                { label: "2004", y: 24 },
                { label: "2006", y: 46 },
                { label: "2007", y: 25 },
                { label: "2008", y: 43 },
                { label: "2009", y: 12 },
            ]
        }]
    }
}