All Components

Box Plot

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

The Box Plot Chart is useful for displaying variation in statistical samples of data. The Box Plot Chart uses seven values—first and third quartile (q1 and q3), median (that is the second quartile), upper and lower value (inner fences), mean and outliers. The advantage of this type of series is that it displays detailed information about a set of data in a small space.

Basic Usage

The following example demonstrates the Box Plot Chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Monthly Mean Temperatures (&deg;F)'"
                 :legend-visible="false"
                 :series="series"
                 :category-axis="categoryAxis"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                type: "boxPlot",
                data: [
                    [26.2,38.3,51,61.45,68.9,49.0,[18.3, 20, 70, 72,5]],
                    [26.4,38.125,46.8,60.425,66.8,47.3,[18, 69, 71.3, 71.5]],
                    [31.6,41.725,52.35,62.175,70.8,52.3,[14, 16.4, 74]],
                    [34.4,39.375,49.9,61.425,69.2,50.3,[16, 18, 72, 72.5]],
                    [29.9,38.35,50.4,60.875,69.7,49.9,[19, 20, 76, 78]],
                    [22.3,36.875,48.9,62.65,70.3,49.0,[16.5, 17, 74, 75, 78]],
                    [32.3,39.5,54.1,61.175,67.3,50.8,[13, 14, 15, 74.3, 75.2, 76]],
                    [28.5,36.075,50.5,64.2,70.4,49.6,[18, 22, 73.4, 75]],
                    [33.6,40.65,49.55,62.8,69.2,51.1,[17, 73]],
                    [33.6,38.6,47.9,60.825,67,49.7,[12, 13.5, 16, 73, 74.6, 77]],
                    [31.9,36.425,49.3,61.825,69.7,49.4,[17, 76]],
                    [34,41.225,51.15,62.4,68.8,51.6,[14.6, 17.3, 72.3, 74]]
                ],
                tooltip: {
                    visible: true
                }
            }],
            categoryAxis: {
                categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                majorGridLines: {
                    visible: false
                },
                labels: {
                    rotation: "auto"
                }
            }
        }
    }
})

Vertical Box Plot

The Box Plot chart could also be configured with vertical orientation. In this way its main elements will be represented as bars instead of columns.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Monthly Mean Temperatures (&deg;F)'"
                 :legend-visible="false"
                 :series="series"
                 :category-axis="categoryAxis"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                type: "verticalBoxPlot",
                data: [
                    [26.2,38.3,51,61.45,68.9,49.0,[18.3, 20, 70, 72,5]],
                    [26.4,38.125,46.8,60.425,66.8,47.3,[18, 69, 71.3, 71.5]],
                    [31.6,41.725,52.35,62.175,70.8,52.3,[14, 16.4, 74]],
                    [34.4,39.375,49.9,61.425,69.2,50.3,[16, 18, 72, 72.5]],
                    [29.9,38.35,50.4,60.875,69.7,49.9,[19, 20, 76, 78]],
                    [22.3,36.875,48.9,62.65,70.3,49.0,[16.5, 17, 74, 75, 78]],
                    [32.3,39.5,54.1,61.175,67.3,50.8,[13, 14, 15, 74.3, 75.2, 76]],
                    [28.5,36.075,50.5,64.2,70.4,49.6,[18, 22, 73.4, 75]],
                    [33.6,40.65,49.55,62.8,69.2,51.1,[17, 73]],
                    [33.6,38.6,47.9,60.825,67,49.7,[12, 13.5, 16, 73, 74.6, 77]],
                    [31.9,36.425,49.3,61.825,69.7,49.4,[17, 76]],
                    [34,41.225,51.15,62.4,68.8,51.6,[14.6, 17.3, 72.3, 74]]
                ],
                tooltip: {
                    visible: true
                }
            }],
            categoryAxis: {
                categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                majorGridLines: {
                    visible: false
                },
                labels: {
                    rotation: "auto"
                }
            }
        }
    }
})
In this article