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

Box Plot

Updated on Jan 20, 2026

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

Vertical Box Plot

The Box Plot chart type also supports a vertical orientation by setting the series type to verticalBoxPlot. When you use verticalBoxPlot, the chart rotates the box plots 90 degrees, displaying categories along the vertical axis and values along the horizontal axis. This orientation can be useful when you have long category names or when you want to emphasize the horizontal distribution of values.

The vertical box plot accepts the same data structure and field mappings as the standard box plot. All customization options for mean, median, outliers, and whiskers are also available.

The following example demonstrates how to create a vertical Box Plot chart.

Change Theme

Theme

Loading ...

Customizing the Appearance

The Box Plot chart provides configuration options for customizing the visual appearance of its statistical elements:

color and border—Control the box fill color and border styling (color, width, dashType).
mean—Customize the mean line appearance, which is dashed by default (color, width, dashType).
median—Configure the median line that divides the box (color, width, dashType).
whiskers—Style the lines extending to minimum and maximum values (color, width, dashType).
outliers—Customize the markers for data points outside the whisker range (background, border, size, type).

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

Vertical Box Plot

Customizing the Appearance

Support and Learning Resources

Additional Resources