Angular Error Bar Chart

Download Angular Chart Samples

Example shows Angular Error Chart being attached to Bar Chart. Error Graphs are used to show uncertainty or variability of data.

/* app.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  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: "<b>{label}</b> <br> <span style=\"color:#4F81BC\">{name}</span>: {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" }
		]
	  }]
	}	
}                              
/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }                        
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>    
</div>

Chart Customizations

You can customize whiskers by using whiskerLength, whiskerThickness, whiskerColor & whiskerDashType properties. Other frequently used customization options are color, stemThickness, etc.

Note   For step by step instructions, follow our Angular Integration Tutorial