Angular Box & Whisker Chart

Download Angular Chart Samples

Angular Box & Whisker Chart is also referred to as Box Plot & is used to show the distribution of data through quartiles, highlighting the median / mean value.

/* 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: "Annual Salary Range"
    },
    axisX: {
      labelTextAlign: "center"
    },
    axisY: {
      title: "Annual Salary (in USD)",
      prefix: "$",
      interval: 40000
    },
    data: [{
      type: "boxAndWhisker",
      upperBoxColor: "#90CAF9",
      lowerBoxColor: "#FFAB91",
      color: "black",
      yValueFormatString: "$#,##0",
      dataPoints: [
        { label: "Registered Nurse", y: [46360, 55320, 82490, 101650, 71000] },
        { label: "Web Developer", y: [83133, 91830, 115828, 128982, 101381] },
        { label: "System Analyst", y: [51910, 60143, 115056, 135450, 85800] },	
        { label: "Application Engineer", y: [63364, 71653, 91120, 100556, 80757] },
        { label: "Aerospace Engineer", y: [82725, 94361, 118683, 129191, 107142] },
        { label: "Dentist", y: [116777, 131082, 171679, 194336, 146794] }
      ]
    }]
  }
}                              
/* 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 set the color for the upper box and the lower box using upperBoxColor and lowerBoxColor. Some other commonly used customization in Box Plot includes whiskerColor, whiskerThickness, stemColor, etc.

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