Skip to content
daisyBlazor
Change theme, current: daisyblazor
Choose a theme All 37 →

BoxPlotChart

Compares how values spread across groups: each box runs from the first to the third quartile with the median across it, whiskers reach the furthest values within 1.5 IQR, and dots mark the outliers. Pass the raw values; D3 computes the statistics and the scales.
Distribution
Cover · <BoxPlotChart>
Box plotEU: median 89.55, quartiles 69.98 to 117.53, whiskers 25.9 to 182.3, 8 outliers (n = 200); US: median 71.7, quartiles 55 to 92.63, whiskers 27.1 to 148.1, 6 outliers (n = 200); APAC: median 131.1, quartiles 100.03 to 176.85, whiskers 32.4 to 291.7, 10 outliers (n = 200)EUUSAPAC0100200300400EU: median 89.55, quartiles 69.98 to 117.53, whiskers 25.9 to 182.3, 8 outliers (n = 200) US: median 71.7, quartiles 55 to 92.63, whiskers 27.1 to 148.1, 6 outliers (n = 200) APAC: median 131.1, quartiles 100.03 to 176.85, whiskers 32.4 to 291.7, 10 outliers (n = 200)

Examples

Basic

Each ValueGroup holds a name and its raw values. Hover a box for its median, quartiles, whiskers and count.

API response time by region
API response time by regionEU West: median 90 ms, quartiles 70 ms to 118 ms, whiskers 26 ms to 182 ms, 8 outliers (n = 200); US East: median 72 ms, quartiles 55 ms to 93 ms, whiskers 27 ms to 148 ms, 6 outliers (n = 200); US West: median 95 ms, quartiles 77 ms to 119 ms, whiskers 39 ms to 175 ms, 2 outliers (n = 200); APAC: median 131 ms, quartiles 100 ms to 177 ms, whiskers 32 ms to 292 ms, 10 outliers (n = 200); LATAM: median 166 ms, quartiles 126 ms to 222 ms, whiskers 64 ms to 326 ms, 4 outliers (n = 120)EU WestUS EastUS WestAPACLATAM0200400600800Response time (ms)EU West: median 90 ms, quartiles 70 ms to 118 ms, whiskers 26 ms to 182 ms, 8 outliers (n = 200) EU West outlier: 192 msEU West outlier: 193 msEU West outlier: 194 msEU West outlier: 205 msEU West outlier: 206 msEU West outlier: 220 msEU West outlier: 254 msEU West outlier: 361 msUS East: median 72 ms, quartiles 55 ms to 93 ms, whiskers 27 ms to 148 ms, 6 outliers (n = 200) US East outlier: 156 msUS East outlier: 160 msUS East outlier: 162 msUS East outlier: 165 msUS East outlier: 170 msUS East outlier: 175 msUS West: median 95 ms, quartiles 77 ms to 119 ms, whiskers 39 ms to 175 ms, 2 outliers (n = 200) US West outlier: 207 msUS West outlier: 211 msAPAC: median 131 ms, quartiles 100 ms to 177 ms, whiskers 32 ms to 292 ms, 10 outliers (n = 200) APAC outlier: 298 msAPAC outlier: 316 msAPAC outlier: 317 msAPAC outlier: 318 msAPAC outlier: 331 msAPAC outlier: 331 msAPAC outlier: 345 msAPAC outlier: 366 msAPAC outlier: 411 msAPAC outlier: 444 msLATAM: median 166 ms, quartiles 126 ms to 222 ms, whiskers 64 ms to 326 ms, 4 outliers (n = 120) LATAM outlier: 386 msLATAM outlier: 405 msLATAM outlier: 480 msLATAM outlier: 829 ms
website/Examples/Charts/BoxPlotChartBasicExample.razor Source

Horizontal

Horizontal puts the groups down the side, which suits long names. A group's Color overrides the palette.

Box plot of Deployment duration (min)Web frontend: median 6.0 min, quartiles 5.1 min to 7.2 min, whiskers 3.4 min to 9.7 min, 2 outliers (n = 80); Billing API: median 11.3 min, quartiles 9.4 min to 12.8 min, whiskers 6.0 min to 17.1 min, 2 outliers (n = 80); Search indexer: median 18.0 min, quartiles 13.8 min to 23.2 min, whiskers 8.8 min to 33.7 min, 3 outliers (n = 60); Data pipeline: median 26.6 min, quartiles 23.1 min to 29.8 min, whiskers 13.2 min to 39.7 min, 3 outliers (n = 50)05101520253035404550Web frontendBilling APISearch indexerData pipelineDeployment duration (min)Web frontend: median 6.0 min, quartiles 5.1 min to 7.2 min, whiskers 3.4 min to 9.7 min, 2 outliers (n = 80) Web frontend outlier: 10.8 minWeb frontend outlier: 10.9 minBilling API: median 11.3 min, quartiles 9.4 min to 12.8 min, whiskers 6.0 min to 17.1 min, 2 outliers (n = 80) Billing API outlier: 18.6 minBilling API outlier: 20.9 minSearch indexer: median 18.0 min, quartiles 13.8 min to 23.2 min, whiskers 8.8 min to 33.7 min, 3 outliers (n = 60) Search indexer outlier: 38.2 minSearch indexer outlier: 38.8 minSearch indexer outlier: 39.2 minData pipeline: median 26.6 min, quartiles 23.1 min to 29.8 min, whiskers 13.2 min to 39.7 min, 3 outliers (n = 50) Data pipeline outlier: 42.6 minData pipeline outlier: 43.0 minData pipeline outlier: 48.6 min
website/Examples/Charts/BoxPlotChartHorizontalExample.razor Source

Playground

API response time by region
API response time by regionEU West: median 90 ms, quartiles 70 ms to 118 ms, whiskers 26 ms to 182 ms, 8 outliers (n = 200); US East: median 72 ms, quartiles 55 ms to 93 ms, whiskers 27 ms to 148 ms, 6 outliers (n = 200); US West: median 95 ms, quartiles 77 ms to 119 ms, whiskers 39 ms to 175 ms, 2 outliers (n = 200); APAC: median 131 ms, quartiles 100 ms to 177 ms, whiskers 32 ms to 292 ms, 10 outliers (n = 200); LATAM: median 166 ms, quartiles 126 ms to 222 ms, whiskers 64 ms to 326 ms, 4 outliers (n = 120)EU WestUS EastUS WestAPACLATAM0200400600800Response time (ms)EU West: median 90 ms, quartiles 70 ms to 118 ms, whiskers 26 ms to 182 ms, 8 outliers (n = 200) EU West outlier: 192 msEU West outlier: 193 msEU West outlier: 194 msEU West outlier: 205 msEU West outlier: 206 msEU West outlier: 220 msEU West outlier: 254 msEU West outlier: 361 msUS East: median 72 ms, quartiles 55 ms to 93 ms, whiskers 27 ms to 148 ms, 6 outliers (n = 200) US East outlier: 156 msUS East outlier: 160 msUS East outlier: 162 msUS East outlier: 165 msUS East outlier: 170 msUS East outlier: 175 msUS West: median 95 ms, quartiles 77 ms to 119 ms, whiskers 39 ms to 175 ms, 2 outliers (n = 200) US West outlier: 207 msUS West outlier: 211 msAPAC: median 131 ms, quartiles 100 ms to 177 ms, whiskers 32 ms to 292 ms, 10 outliers (n = 200) APAC outlier: 298 msAPAC outlier: 316 msAPAC outlier: 317 msAPAC outlier: 318 msAPAC outlier: 331 msAPAC outlier: 331 msAPAC outlier: 345 msAPAC outlier: 366 msAPAC outlier: 411 msAPAC outlier: 444 msLATAM: median 166 ms, quartiles 126 ms to 222 ms, whiskers 64 ms to 326 ms, 4 outliers (n = 120) LATAM outlier: 386 msLATAM outlier: 405 msLATAM outlier: 480 msLATAM outlier: 829 ms
<BoxPlotChart
              ValueTitle="Response time (ms)"
              ValueFormat="{0:N0} ms"
              Title="API response time by region"
              Groups="@_regions" />

@code {
    // Raw response times; the chart works out the quartiles, whiskers and outliers.
    private readonly ValueGroup[] _regions =
    [
        new("EU West", DistributionSamples.Skewed(seed: 41, count: 200, median: 85)),
        new("US East", DistributionSamples.Skewed(seed: 42, count: 200, median: 70)),
        new("US West", DistributionSamples.Skewed(seed: 43, count: 200, median: 95, spread: 0.3)),
        new("APAC", DistributionSamples.Skewed(seed: 44, count: 200, median: 140, spread: 0.45)),
        new("LATAM", DistributionSamples.Skewed(seed: 45, count: 120, median: 160, spread: 0.5)),
    ];
}

API

<BoxPlotChart>

DaisyBlazor.Charts

Parameters

  • AspectRatio double
    = 1.78

    Width divided by height. The chart keeps this shape at any width; its text keeps its size.

  • Groups IReadOnlyList<ValueGroup>
    = []

    The groups, each with its raw values. Values that are not finite numbers are ignored; empty groups are not drawn.

  • Horizontal bool
    = false

    Lay the boxes out in rows, with values along the horizontal axis.

  • RowHeight double?
    = null

    Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.

  • ShowOutliers bool
    = true

    Draw values beyond the whiskers as individual dots.

  • ShowTitle bool
    = true

    Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.

  • Title string
    = null

    Optional heading rendered above the chart; it is also the chart's accessible name.

  • ValueFormat string
    = "{0:#,0.##}"

    Format string for values in tooltips and the description, e.g. "{0:N0} ms".

  • ValueTitle string
    = null

    Title of the value axis, e.g. "Response time (ms)".

  • Width string
    = "100%"

    CSS width of the chart wrapper.

  • Class string
    = null

    Additional CSS classes merged onto the w-full wrapper.

  • Style string
    = null

    Inline styles appended after the width on the wrapper.

ValueGroup

DaisyBlazor.Charts

A named set of raw values, summarised by BoxPlotChart, ViolinChart, BeeswarmChart and RidgelineChart. Values that are not finite numbers are ignored; a group with none left is not drawn.

Properties

  • Color string

    Optional CSS colour; falls back to the theme palette by position.

  • Name string

    Group label, shown on the axis and in tooltips.

  • Values IReadOnlyList<double>

    The raw observations.

Methods

  • <Clone>$ () → ValueGroup
  • Deconstruct (String& Name, IReadOnlyList`1& Values, String& Color) → void
  • Equals (object obj) → bool
  • Equals (ValueGroup other) → bool
  • GetHashCode () → int
  • ToString () → string
Esc
  • Getting started Install the packages, turn on the CSS build, register services and render your first component. Guide
  • Theming ThemeProvider, the built-in themes, dark mode, persistence, brand themes and a theme picker. Guide
  • CSS preset What preset.css ships, how the NuGet package builds your CSS without Node, and the class safelist. Guide
  • Charts 54 theme-aware SVG chart types, laid out by a bundled D3 module, with optional server rendering. Guide
  • Migrating from MudBlazor Move a MudBlazor app over incrementally, mostly by renaming MudX to X. Guide
  • Themes All 37 themes rendered live, side by side; switch the whole site with one click. Guide
↑↓ to move Enter to open 85 components and 54 charts indexed
Something went wrong while running the docs. Reload