New to Kendo UI for Angular? Start a free 30-day trial

Box Plot

Updated on Dec 12, 2025

Box Plot charts are categorical charts that graphically render groups of numerical data through their quartiles. Also known as box and whiskers charts, they display a data distribution summary with six statistical indicators—lower value, first quartile, median, mean, third quartile, and upper value—plus outliers for each series.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Box Plot chart series to an array through the data property in two formats:

Binding to arrays—Use arrays of [lower, q1, median, q3, upper] values where each element represents the statistical distribution values.

    public data: [number, number, number, number, number][] = [
        [10, 15, 20, 25, 30],
        [12, 18, 22, 28, 32],
        [8, 13, 19, 23, 27]
    ];

Binding to objects—Use an array of objects with custom properties.

public data: Array<{
    category: string;
    lower: number;
    q1: number;
    median: number;
    q3: number;
    upper: number;
    mean?: number;
    outliers?: number[];
}> = [
    {
        category: 'Q1',
        lower: 10,
        q1: 15,
        median: 20,
        q3: 25,
        upper: 30,
        mean: 20.5,
        outliers: [5, 35]
    },
    {
        category: 'Q2',
        lower: 12,
        q1: 18,
        median: 22,
        q3: 28,
        upper: 32
    }
];

When binding to objects, specify which properties contain the data through the following field mappings:

Property	Data type	Required	Description
`lowerField`	`string`	Yes*	The property name that contains the lower value with `number` values (*required when binding to objects).
`categoryField`	`string`	No	The property name that contains the category with `string`, `date`, or `number` values.
`q1Field`	`string`	Yes*	The property name that contains the first quartile value with `number` values (*required when binding to objects).
`medianField`	`string`	Yes*	The property name that contains the median value with `number` values (*required when binding to objects).
`q3Field`	`string`	Yes*	The property name that contains the third quartile value with `number` values (*required when binding to objects).
`upperField`	`string`	Yes*	The property name that contains the upper value with `number` values (*required when binding to objects).
`meanField`	`string`	No	The property name that contains the mean value with `number` values.
`outliersField`	`string`	No	The property name that contains the outliers array with `number[]` values.

The following example demonstrates how to bind the Box Plot chart series to data using object models.

Change Theme

Theme

Loading ...

Customizing the 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.

Change Theme

Theme

Loading ...

Box Plot

Binding to Data

Customizing the Appearance

Support and Learning Resources

Additional Resources