Preview Updated 2026-05-10

BoxPlot

Five-number statistical summary with outliers.

Basic usage

Data is passed in via props and rendered as plain SVG — no third-party charting library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

背景

<script setup lang="ts">
import { CfBoxPlot } from '@chufix-design/vue';
const data = [
  { label: 'p50', min: 80, q1: 95, median: 110, q3: 125, max: 145, outliers: [220] },
  { label: 'p75', min: 120, q1: 140, median: 165, q3: 195, max: 230, outliers: [340] },
  { label: 'p95', min: 200, q1: 235, median: 280, q3: 320, max: 380 },
  { label: 'p99', min: 320, q1: 380, median: 440, q3: 510, max: 620, outliers: [820, 950] },
];
</script>

<template>
  <CfBoxPlot :data="data" />
</template>

<CfBoxPlot ... />

API latency distribution

Four APIs with p25 / median / p75 + outliers; vertical lines show the full min-max range.

背景

<script setup lang="ts">
import { CfBoxPlot } from '@chufix-design/vue';
const apis = [
  { label: '/login', min: 50, q1: 65, median: 80, q3: 110, max: 145, outliers: [220, 280] },
  { label: '/orders', min: 30, q1: 50, median: 75, q3: 110, max: 160, outliers: [320, 510] },
  { label: '/checkout', min: 80, q1: 110, median: 145, q3: 200, max: 280, outliers: [580] },
  { label: '/payment', min: 200, q1: 240, median: 290, q3: 360, max: 440, outliers: [820, 950, 1100] },
];
</script>

<template>
  <CfBoxPlot :data="apis" :height="240" />
</template>

<CfBoxPlot data={apis} />

API

Prop	Type	Default	Description
`data`	`BoxStat[]`	`—`	{ label, min, q1, median, q3, max, outliers? }[]