All Components

Components / Charts / Series Types

Box Plot

Box Plot Charts are Categorical charts which graphically render groups of numerical data through their quartiles.

Basic Usage

The following example demonstrates the Box Plot Chart in action.

import { Component } from '@angular/core';
import { ozoneData } from './ozone-data';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-title text="Monthly Mean Temperatures (&deg;F)"></kendo-chart-title>
          <kendo-chart-series-item type="boxPlot" [data]="data"
                                   lowerField="lower" q1Field="q1" medianField="median"
                                   q3Field="q3" upperField="upper" outliersField="outliers"
                                   meanField="mean" categoryField="year">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = ozoneData;
}

export interface BoxPlotData {
    lower: number;
    q1: number;
    median: number;
    q3: number;
    upper: number;
    mean: number;
    outliers: number[];
    year: string;
}

export const ozoneData: BoxPlotData[] = [{
    lower: 1.3,
    q1: 2.15,
    median: 2.95,
    q3: 3.725,
    upper: 4.7,
    mean: 2.9,
    outliers: [1, 9],
    year: '1996'
}, {
    lower: 2,
    q1: 3.825,
    median: 5.45,
    q3: 6.425,
    upper: 8.2,
    mean: 5.2,
    outliers: [1.5, 2, 8.9],
    year: '1997'
}, {
    lower: 3.8,
    q1: 4.725,
    median: 5.55,
    q3: 5.75,
    upper: 8.7,
    mean: 5.5,
    year: '1998'
}, {
    lower: 3,
    q1: 4.375,
    median: 4.95,
    q3: 5.85,
    upper: 8,
    mean: 5.2,
    outliers: [3, 9.5],
    year: '1999'
}, {
    lower: 2.5,
    q1: 3.925,
    median: 4.15,
    q3: 4.45,
    upper: 5.1,
    mean: 4.1,
    year: '2000'
}, {
    lower: 2.4,
    q1: 3.725,
    median: 4.95,
    q3: 5.85,
    upper: 7.7,
    mean: 4.9,
    outliers: [2.1, 8.3, 9.8],
    year: '2001'
}, {
    lower: 1.7,
    q1: 2.3,
    median: 3.9,
    q3: 5,
    upper: 5.5,
    mean: 3.7,
    outliers: [1.1, 9.1],
    year: '2002'
}, {
    lower: 2.2,
    q1: 2.5,
    median: 3.1,
    q3: 3.975,
    upper: 4.3,
    mean: 3.2,
    outliers: [1.6, 1.8, 9.8],
    year: '2003'
}, {
    lower: 1.9,
    q1: 2.7,
    median: 3.35,
    q3: 4.575,
    upper: 5.7,
    mean: 3.6,
    outliers: [1.1, 8.3],
    year: '2004'
}, {
    lower: 1.7,
    q1: 2.65,
    median: 3.3,
    q3: 4.05,
    upper: 5,
    mean: 3.4,
    year: '2005'
}, {
    lower: 1.4,
    q1: 2.25,
    median: 3.3,
    q3: 4.65,
    upper: 5.7,
    mean: 3.4,
    year: '2006'
}, {
    lower: 1.9,
    q1: 2.85,
    median: 4,
    q3: 4.45,
    upper: 6.1,
    mean: 3.9,
    outliers: [1, 1.2],
    year: '2007'
}, {
    lower: 1.5,
    q1: 2.35,
    median: 4.1,
    q3: 5.225,
    upper: 5.7,
    mean: 3.9,
    outliers: [9, 9.5],
    year: '2008'
}, {
    lower: 1.8,
    q1: 2.325,
    median: 3.35,
    q3: 4,
    upper: 5.4,
    mean: 3.3,
    outliers: [1, 6],
    year: '2009'
}, {
    lower: 1.8,
    q1: 2.75,
    median: 3.35,
    q3: 3.825,
    upper: 4.9,
    mean: 3.4,
    year: '2010'
}, {
    lower: 1.7,
    q1: 2.275,
    median: 3.2,
    q3: 3.825,
    upper: 5.5,
    mean: 3.2,
    outliers: [0.5, 6.7],
    year: '2011'
}, {
    lower: 1.2,
    q1: 1.95,
    median: 2.45,
    q3: 3.075,
    upper: 3.5,
    mean: 2.5,
    year: '2012'
}, {
    lower: 1.3,
    q1: 1.9,
    median: 3.05,
    q3: 3.425,
    upper: 4,
    mean: 2.7,
    outliers: [7, 8.5],
    year: '2013'
}];


import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article