Box Plot

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

The box plot, also known as box and whiskers chart, displays data distribution summary with six indicators (lower value, first quartile, median, mean, third quartile, upper value) and outliers for each series of data.

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);

Customizing Appearance

The following attributes are specific to the box plot and allow customizing the rendering of its elements:

  • mean—controls the appearance of the mean line, which is dashed by default.
  • median—controls the appearance of the median line.
  • outliers—controls the appearance of the points representing the outliers.
  • whiskers—controls the appearance of the min/max whiskers and their connecting lines.

The following example demonstrates how to customize the appearance of the elements of the Box Plot chart.

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"
                                   color="#aaa"
                                   [mean]="{ color: 'red' }"
                                   [median]="{ color: 'yellow' }"
                                   [whiskers]="{ color: 'green' }"
                                   [outliers]="{ border: { color: 'blue' } }">
          </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