MiniChart

Examples #

'use client';

import { MiniChart, type ChartDatum } from '@coreux/ui';

const data = [
  { label: 'Adoption', value: 72, color: '#2457F5' },
  { label: 'Savings', value: 58, color: '#15877A' },
  { label: 'Velocity', value: 44, color: '#E66752' },
  { label: 'Conversion', value: 24, color: '#D99A24' },
] satisfies ChartDatum[];

export default function Bar() {
  return (
    <figure style={{ width: 320, margin: 0, padding: 24, background: '#F4F1E9', color: '#0B1221' }}>
      <figcaption style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>Illustrative product indices (0–100)</figcaption>
      {/* The visible list supplies the complete data alternative to this graphic. */}
      <div aria-hidden="true"><MiniChart type="bar" data={data} /></div>
      <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', fontSize: 14, lineHeight: 1.6 }}>
        {data.map((item) => <li key={item.label}>{item.label}: {item.value}</li>)}
      </ul>
    </figure>
  );
}

Usage #

Use MiniChart for a small supporting graphic beside an explanation. Bar compares individual values, Donut shows additive parts of a whole, and Trend shows equally spaced sequences. These are compact primitives without axes, tick labels, legends, tooltips, interaction, or animation props.

The Bar seed keeps its four numeric values as illustrative product indices. Donut keeps the seed’s five values and colors but relabels them as non-overlapping project effort in hours, so the total has a clear meaning. Trend keeps both seven-point sequences and names them in accompanying text. None are measured CoreUX results.

Each copied example includes a figure caption and all values in a visible list. The graphic is hidden from assistive technology because the adjacent text is its complete alternative. Those labels and lists belong to the example wrapper; MiniChart does not generate them.

Data, sizes & colors #

data for bars and donuts; series for trends

type="bar" and type="donut" require data: an array of objects with label, value, and color. Labels are React keys but are not drawn or included in the chart’s accessible name. Use unique labels and expose their values separately.

type="trend" requires series: an array of objects with color and a points array. It does not accept data. Points are placed at equal horizontal intervals, with a shared automatic vertical domain across every series. There is no date or time scale, custom domain, series label, or legend prop.

Geometry follows the selected type

Bar defaults to width 200 and height 120 CSS pixels. Trend defaults to width 200 and height 100. Donut instead uses size 140 for both dimensions; width and height are not donut props. Each SVG has a matching viewBox. There is no common size prop across all types.

Validate data before rendering

No data count, number, dimension, or color checks are enforced. Supply positive finite dimensions and finite values; bar/trend height should exceed the 4 px reserved by their plot geometry. For bar and donut, use non-negative values; a donut should have a positive total. An empty dataset or all-zero values can produce an empty graphic. Negative bars/segments and non-finite inputs can create invalid SVG geometry rather than a helpful error.

Bars scale against the larger of the maximum value and 1; they do not share a caller-defined domain across charts. Donut divides each value by the sum (falling back to 1 if that sum is zero). It does not require percentages or normalize the source data itself.

Trends include 0 and at least 1 in their vertical domain, so negative points are supported. A series with fewer than two points has no visible line segment. Use at least two finite samples per series and align sample counts and periods when comparing lines. There is no enforced series or point-count limit.

Pass CSS colors directly

Colors become SVG fill or stroke values directly. Use a valid CSS color such as #2457F5, rgb(36, 87, 245), or var(--ds-core-cobalt) with the installed styles. Bare palette names and Tailwind class names are not resolved. MiniChart has no tone, fieldMode, or automatic palette prop.

Props by variant #

The union below comes from the public MiniChartProps export; size defaults are checked against the installed internal renderer for each variant.

ChartDatum · bar and donut

TrendSeries · trend

Accessibility & layout #

By itself, each SVG has role img and only a generic accessible name: “Bar chart”, “Donut chart”, or “Trend chart”. There is no title, description, or data table, and arbitrary ARIA props are not forwarded. Consumers must supply meaningful context and equivalent data. A generic chart name is not a complete alternative.

Use labels and numeric explanations so color is not the only way to read a result. Check graphic contrast on your chosen surface. In these small, secondary graphics, all values are also readable in the accompanying text; do not rely on the colored shapes alone.

Width, height, and size create fixed SVG geometry. There are no breakpoints or automatic container measurement. The className prop can supply intentional CSS sizing, but you must preserve the aspect ratio and verify readability. These examples keep the installed default chart dimensions in a 320 px figure; preview fitting scales that whole figure, and Actual size permits contained scrolling on narrow screens.

For category labels, axes, a legend, runtime validation, and richer accessible chart data, see BarChart. Use StatBlock when one contextual number tells the story clearly.

Consumer setup #

Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.

Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.

The quick start walks through a copied StatBlock in a minimal app.

Source & revision #

This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.

Revision and upgrade notes · Contribution and coverage guide