Angular Error Bar Chart

/* app.component.ts */
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
 
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, CanvasJSAngularChartsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  chartOptions = {
    animationEnabled: true,
    title:{
      text: "QOS - Survey Result",
      fontFamily: "Trebuchet MS, Helvetica, sans-serif"
    },
    axisY:{
      title: "Response values",
      includeZero: true,
      interval: 10
    },
    toolTip: {
      shared: true
    },
    data: [{
      type: "bar",
      name: "Avg. Score",
      toolTipContent: "{label} 
 {name}: {y}",
      dataPoints: [
        { y: 94, label: "Order Accuracy" },
        { y: 74, label: "Packaging" },
        { y: 80, label: "Quantity" },
        { y: 88, label: "Quality" },
        { y: 76, label: "Delivery" }
      ]
    }, {
      type: "error",
      name: "Variability Range",
      toolTipContent: "{name}: {y[0]} - {y[1]}",
      dataPoints: [
        { y: [92, 98], label: "Order Accuracy" },
        { y: [70, 78], label: "Packaging" },
        { y: [78, 85], label: "Quantity" },
        { y: [85, 92], label: "Quality" },
        { y: [72, 78], label: "Delivery" }
      ]
    }]
  }
}