|
| 1 | +--- |
| 2 | +title: Box Plot Charts |
| 3 | +page_title: Box Plot Charts | Kendo UI Charts HtmlHelper for ASP.NET Core |
| 4 | +description: "Learn how to create a Kendo UI Box Plot Chart for ASP.NET Core and configure its options." |
| 5 | +slug: boxplotcharts_aspnetcore_htmlhelper |
| 6 | +--- |
| 7 | + |
| 8 | +# Box Plot Charts |
| 9 | + |
| 10 | +The [Kendo UI Box Plot Chart HtmlHelper for ASP.NET Core](https://demos.telerik.com/aspnet-core/box-plot-charts/index) 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. |
| 11 | + |
| 12 | +If you are not familiar with the usage and terminology of the box plots and want to understand it better, check the [Wikipedia page on box plots](https://en.wikipedia.org/wiki/Box_plot). |
| 13 | + |
| 14 | +## Configuration |
| 15 | + |
| 16 | +Use the `BoxPlot` series type to create a Kendo UI Box Plot Chart. |
| 17 | + |
| 18 | +When binding the Box Plot Chart, there are seven special properties of the `Series` object that you should set in order to display the chart successfully—`q1` (first quartile), `q3Field` (third quartile), `lower`, `upper`, `median` (second quartile), `mean`, `outliers`. The first five are required, while `mean` and `outliers` are optional. All properties have to point to numeric fields in the DataSource, with the exception of `outliers` which has to point to a field that contains an array of numbers. The example below shows the result of such a configuration |
| 19 | + |
| 20 | +###### Example |
| 21 | + |
| 22 | + @(Html.Kendo().Chart() |
| 23 | + .Name("chart") |
| 24 | + .Title("Monthly Mean Temperatures (°F)") |
| 25 | + .Legend(legend => legend.Visible(false)) |
| 26 | + .Series(series => series |
| 27 | + .BoxPlot(new System.Collections.ArrayList() { |
| 28 | + new { lower= 26.2, q1= 38.3 , median= 51.0, q3= 61.45, upper= 68.9, mean= 49.0, outliers= new [] {18.3, 20, 70, 72, 5}} , |
| 29 | + new { lower= 26.4, q1= 38.125, median= 46.8 , q3= 60.425, upper= 66.8, mean= 47.3, outliers= new [] {18, 69, 71.3, 71.5}}, |
| 30 | + new { lower= 31.6, q1= 41.725, median= 52.35, q3= 62.175, upper= 70.8, mean= 52.3, outliers= new [] {14, 16.4, 74}}, |
| 31 | + new { lower= 34.4, q1= 39.375, median= 49.9 , q3= 61.425, upper= 69.2, mean= 50.3, outliers= new [] {16, 18, 72, 72.5}} , |
| 32 | + new { lower= 29.9, q1= 38.35, median= 50.4, q3= 60.875, upper= 69.7, mean= 49.9, outliers= new [] {19, 20, 76, 78}}, |
| 33 | + new { lower= 22.3, q1= 36.875, median= 48.9 , q3= 62.65 , upper= 70.3, mean= 49.0, outliers= new [] {16.5, 17, 74, 75, 78}}, |
| 34 | + new { lower= 32.3, q1= 39.5, median= 54.1, q3= 61.175, upper= 67.3, mean= 50.8, outliers= new [] {13, 14, 15, 74.3, 75.2, 76}}, |
| 35 | + new { lower= 28.5, q1= 36.075, median= 50.5 , q3= 64.2, upper= 70.4, mean= 49.6, outliers= new [] {18, 22, 73.4, 75}}, |
| 36 | + new { lower= 33.6, q1= 40.65, median= 49.55, q3= 62.8, upper= 69.2, mean= 51.1, outliers= new [] {17, 73}}, |
| 37 | + new { lower= 33.6, q1= 38.6, median= 47.9, q3= 60.825, upper= 67.0, mean= 49.7, outliers= new [] {12, 13.5, 16, 73, 74.6, 77}}, |
| 38 | + new { lower= 31.9, q1= 36.425, median= 49.3, q3= 61.825, upper= 69.7, mean= 49.4, outliers= new [] {17, 76}}, |
| 39 | + new { lower= 34.0, q1= 41.225, median= 51.15, q3= 62.4, upper= 68.8, mean= 51.6, outliers= new [] {14.6, 17.3, 72.3, 74}} |
| 40 | + }) |
| 41 | + ) |
| 42 | + .CategoryAxis(categoryAxis => categoryAxis |
| 43 | + .Categories(new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }) |
| 44 | + .MajorGridLines(majorGridLines => majorGridLines.Visible(false)) |
| 45 | + ) |
| 46 | + ) |
| 47 | + |
| 48 | +### Orientation |
| 49 | + |
| 50 | +The Box Plot Chart orientation can be changed by setting the series type to `VerticalBoxPlot`. |
| 51 | + |
| 52 | +###### Example |
| 53 | + |
| 54 | + @(Html.Kendo().Chart() |
| 55 | + .Name("chart") |
| 56 | + .Title("Monthly Mean Temperatures (°F)") |
| 57 | + .Legend(legend => legend.Visible(false)) |
| 58 | + .Series(series => series |
| 59 | + .VerticalBoxPlot(new System.Collections.ArrayList() { |
| 60 | + new { lower= 26.2, q1= 38.3 , median= 51.0, q3= 61.45, upper= 68.9, mean= 49.0, outliers= new [] {18.3, 20, 70, 72, 5}}, |
| 61 | + new { lower= 26.4, q1= 38.125, median= 46.8 , q3= 60.425, upper= 66.8, mean= 47.3, outliers= new [] {18, 69, 71.3, 71.5}}, |
| 62 | + new { lower= 31.6, q1= 41.725, median= 52.35, q3= 62.175, upper= 70.8, mean= 52.3, outliers= new [] {14, 16.4, 74}}, |
| 63 | + new { lower= 34.4, q1= 39.375, median= 49.9 , q3= 61.425, upper= 69.2, mean= 50.3, outliers= new [] {16, 18, 72, 72.5}}, |
| 64 | + new { lower= 29.9, q1= 38.35, median= 50.4, q3= 60.875, upper= 69.7, mean= 49.9, outliers= new [] {19, 20, 76, 78}}, |
| 65 | + new { lower= 22.3, q1= 36.875, median= 48.9 , q3= 62.65 , upper= 70.3, mean= 49.0, outliers= new [] {16.5, 17, 74, 75, 78}}, |
| 66 | + new { lower= 32.3, q1= 39.5, median= 54.1, q3= 61.175, upper= 67.3, mean= 50.8, outliers= new [] {13, 14, 15, 74.3, 75.2, 76}}, |
| 67 | + new { lower= 28.5, q1= 36.075, median= 50.5 , q3= 64.2, upper= 70.4, mean= 49.6, outliers= new [] {18, 22, 73.4, 75}}, |
| 68 | + new { lower= 33.6, q1= 40.65, median= 49.55, q3= 62.8, upper= 69.2, mean= 51.1, outliers= new [] {17, 73}}, |
| 69 | + new { lower= 33.6, q1= 38.6, median= 47.9, q3= 60.825, upper= 67.0, mean= 49.7, outliers= new [] {12, 13.5, 16, 73, 74.6, 77}}, |
| 70 | + new { lower= 31.9, q1= 36.425, median= 49.3, q3= 61.825, upper= 69.7, mean= 49.4, outliers= new [] {17, 76}}, |
| 71 | + new { lower= 34.0, q1= 41.225, median= 51.15, q3= 62.4, upper= 68.8, mean= 51.6, outliers= new [] {14.6, 17.3, 72.3, 74}} |
| 72 | + }) |
| 73 | + ) |
| 74 | + .CategoryAxis(categoryAxis => categoryAxis |
| 75 | + .Categories(new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }) |
| 76 | + .MajorGridLines(majorGridLines => majorGridLines.Visible(false)) |
| 77 | + ) |
| 78 | + ) |
| 79 | + |
| 80 | +### Customizing Outliers |
| 81 | + |
| 82 | +Outliers are values that appear outside of the range closed by the lower and upper values (inner fences). There are two types of outliers in a box plot based on their distance from the inner fences—mild and extreme. The Box Plot Chart renders them by default as crosses (mild) and circles (extreme). To let you configure them separately, the Chart has two configuration options—[`series.outliers`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.outliers) for mild outliers and [`series.extremes`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.extremes) for extreme outliers. You can use them to customize the outliers. |
| 83 | + |
| 84 | +## See Also |
| 85 | + |
| 86 | +Other articles on Kendo UI Charts and chart types: |
| 87 | + |
| 88 | +* [Overview of the Kendo UI Chart Html Helper for ASP.NET Core ]({% slug htmlhelpers_charts_aspnetcore %}) |
| 89 | +* [Area Charts]({% slug areacharts_aspnetcore_htmlhelper %}) |
| 90 | +* [Bubble Charts]({% slug bubblecharts_aspnetcore_htmlhelper %}) |
| 91 | +* [Bar Charts]({% slug barcharts_aspnetcore_htmlhelper %}) |
| 92 | +* [Pie Charts]({% slug piecharts_aspnetcore_htmlhelper %}) |
| 93 | +* [Stock Charts]({% slug overview_stockcharthelper_aspnetcore %}) |
| 94 | +* [TreeMap]({% slug overview_treemaphelper_aspnetcore %}) |
| 95 | +* [Chart JavaScript API Reference](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart) |
0 commit comments