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