Box Plot Charts

Box Plot Charts are useful for displaying variations in statistical samples of data and data details in a small space.

Getting Started

The Box Plot Chart uses the following values:

  • First and third quartile (q1 and q3)
  • Median (that is the second quartile)
  • Upper and lower value (inner fences)
  • Mean and outliers

To create a Box Plot series, use boxPlot in the series configuration.

Binding the Box Plot Chart

When you bind the Box Plot Chart, you have to set the following special properties of the Series object so that the Chart is successfully displayed:

  • (Mandatory) q1Field (first quartile)
  • (Mandatory) q3Field (third quartile)
  • (Mandatory) lowerField
  • (Mandatory) upperField
  • (Mandatory) medianField (second quartile)
  • (Optional) meanField
  • (Optional) outliersField

All properties except for outliersField have to point to numeric fields in the DataSource. outliersField has to point to a field that contains an array of numbers.

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        series: [{
          type: 'boxPlot',
          q1Field: 'q1',
          q3Field: 'q3',
          lowerField: 'lower',
          upperField: 'upper',
          medianField: 'median',
          meanField: 'mean',
          outliersField: 'outliers'
        }],
        dataSource: {
          data: [
            { year: 2004, lower: 1.8, q1: 2.75, median: 3.35, q3: 3.825, upper: 4.9, mean: 3.4 },
            { year: 2005, lower: 1.7, q1: 2.275, median: 3.2, q3: 3.825, upper: 5.5, outliers: [0.5, 6.7] },
            { year: 2006, lower: 1.2, q1: 1.95, median: 2.45, q3: 3.075, upper: 3.5, mean: 2.5 },
            { year: 2007, lower: 1.3, q1: 1.9, median: 3.05, q3: 3.425, upper: 4, mean: 2.7, outliers: [7, 8.5] }
          ]
        },
        categoryAxis: {
          field: 'year'
        },
        tooltip: {
          visible: true
        }
      });
    </script>

Setting the Orientation

You can change the orientation of the Box Plot Chart by setting the series type to verticalBoxPlot.

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        series: [{
          type: 'verticalBoxPlot',
          q1Field: 'q1',
          q3Field: 'q3',
          lowerField: 'lower',
          upperField: 'upper',
          medianField: 'median',
          meanField: 'mean',
          outliersField: 'outliers'
        }],
        dataSource: {
          data: [
            { year: 2004, lower: 1.8, q1: 2.75, median: 3.35, q3: 3.825, upper: 4.9, mean: 3.4 },
            { year: 2005, lower: 1.7, q1: 2.275, median: 3.2, q3: 3.825, upper: 5.5, outliers: [0.5, 6.7] },
            { year: 2006, lower: 1.2, q1: 1.95, median: 2.45, q3: 3.075, upper: 3.5, mean: 2.5 },
            { year: 2007, lower: 1.3, q1: 1.9, median: 3.05, q3: 3.425, upper: 4, mean: 2.7, outliers: [7, 8.5] }
          ]
        },
        categoryAxis: {
          field: 'year'
        },
        tooltip: {
          visible: true
        }
      });
    </script>

Customizing the Outliers

Outliers are values that appear outside the range between lower and upper values (inner fences). Based on their distance from the inner fences, the outliers in a box plot are mild and extreme. The Box Plot Chart renders them by default as crosses (mild) and circles (extreme).

You can configure the outliers separately and customize them by using:

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        series: [{
          type: 'verticalBoxPlot',
          q1Field: 'q1',
          q3Field: 'q3',
          lowerField: 'lower',
          upperField: 'upper',
          medianField: 'median',
          meanField: 'mean',
          outliersField: 'outliers',
          outliers: {
            border: {
              color: "green"
            },
            type: "triangle"
          },
          extremes: {
            border: {
              color: "red"
            },
            type: "square",
            rotation: 45
          }
        }],
        dataSource: {
          data: [
            { year: 2004, lower: 1.8, q1: 2.75, median: 3.35, q3: 3.825, upper: 4.9, mean: 3.4 },
            { year: 2005, lower: 1.7, q1: 2.275, median: 3.2, q3: 3.825, upper: 5.5, outliers: [0.5, 6.7] },
            { year: 2006, lower: 1.2, q1: 1.95, median: 2.45, q3: 3.075, upper: 3.5, mean: 2.5 },
            { year: 2007, lower: 1.3, q1: 1.9, median: 3.05, q3: 3.425, upper: 4, mean: 2.7, outliers: [7, 8.5] }
          ]
        },
        categoryAxis: {
          field: 'year'
        },
        tooltip: {
          visible: true
        }
      });
    </script>

See Also

In this article
Not finding the help you need? Improve this article