Box Plot

import { Component } from '@angular/core';
import { WrBoxplotChart } from 'ngwr/charts/boxplot-chart';

@Component({ imports: [WrBoxplotChart] })
export class MyComponent {}

<wr-boxplot-chart
  ariaLabel="Response time by region"
  xLabel="Region"
  yLabel="Response time, ms"
  [groups]="[
    { label: 'Europe', values: [96, 102, 108, 111, 115, 290] },
    { label: 'Asia', values: [120, 131, 140, 148, 155, 161] }
  ]"
/>

<wr-boxplot-chart
  ariaLabel="Eleven values, one outlier"
  [groups]="[{ label: 'Sample', values: [12, 14, 15, 17, 18, 19, 21, 22, 24, 27, 48] }]"
/>

<wr-boxplot-chart ariaLabel="Build time by release" yLabel="Build time, s" [groups]="releases" />

releases: WrBoxplotGroup[] = [
  { label: 'v14', stats: { min: 80, q1: 101, median: 118, q3: 134, max: 170, outliers: [240, 262] } },
  { label: 'v15', stats: { min: 70, q1: 92, median: 104, q3: 121, max: 150, outliers: [31] } },
  { label: 'v15.1', stats: { min: 61, q1: 80, median: 90, q3: 101, max: 128 }, color: 'var(--wr-color-success)' },
];

<wr-boxplot-chart ariaLabel="Build time by release" yLabel="Build time" [groups]="releases" [valueFormat]="seconds" />

const unit = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'second' });

seconds = (value: number): string => unit.format(value);

<wr-boxplot-chart ariaLabel="Response time by region" dataTable [groups]="regions" />

interface WrBoxplotGroup {
  label: string;
  values?: readonly number[];
  stats?: WrBoxplotStats;
  color?: string;
}

interface WrBoxplotStats {
  min: number;
  q1: number;
  median: number;
  q3: number;
  max: number;
  outliers?: readonly number[];
}