Chart

The example below loads live from Storybook; open it in Storybook for the controls.

Live example, StorybookOpen in Storybook

Line and area

line shows change along an ordered axis such as time. With several series every line has its own symbol and line style (solid, dashed, dotted), so series do not differ by colour alone. area softly fills under a single series.

Monthly values

Tablo olarak göster

Values of two series from January to June.

LightDark

Copy code

import { Chart } from '@bigbang/ui';

const months = ['January', 'February', 'March', 'April', 'May', 'June'];
const first = [12, 18, 15, 24, 30, 28];
const second = [8, 11, 17, 14, 19, 26];

const toPoints = (values: number[]) => values.map((y, index) => ({ x: months[index] ?? '', y }));

export default function Line() {
  return (
    <div className="w-full max-w-2xl">
      <Chart
        kind="line"
        title="Monthly values"
        description="Values of two series from January to June."
        series={[
          { id: 'first', label: 'First series', data: toPoints(first) },
          { id: 'second', label: 'Second series', data: toPoints(second) },
        ]}
      />
    </div>
  );
}

Bar and stacked bar

bar compares categories; the value axis always starts at zero. stacked-bar shows the parts of a whole. Bars carry a pattern (decal) in addition to colour.

Monthly values

Tablo olarak göster

Monthly values

Tablo olarak göster

LightDark

Copy code

import { Chart } from '@bigbang/ui';

const months = ['January', 'February', 'March', 'April', 'May', 'June'];
const first = [12, 18, 15, 24, 30, 28];
const second = [8, 11, 17, 14, 19, 26];
const third = [5, 9, 7, 12, 10, 15];

const toPoints = (values: number[]) => values.map((y, index) => ({ x: months[index] ?? '', y }));

export default function Bar() {
  return (
    <div className="grid w-full gap-3xl md:grid-cols-2">
      <Chart
        kind="bar"
        title="Monthly values"
        height="sm"
        series={[
          { id: 'first', label: 'First series', data: toPoints(first) },
          { id: 'second', label: 'Second series', data: toPoints(second) },
        ]}
      />
      <Chart
        kind="stacked-bar"
        title="Monthly values"
        height="sm"
        series={[
          { id: 'first', label: 'First series', data: toPoints(first) },
          { id: 'second', label: 'Second series', data: toPoints(second) },
          { id: 'third', label: 'Third series', data: toPoints(third) },
        ]}
      />
    </div>
  );
}

Donut

donut shows the shares of one series; use at most 5 parts. The first series is drawn. Slices differ by colour and pattern.

Share of categories

Tablo olarak göster

LightDark

Copy code

import { Chart } from '@bigbang/ui';

export default function Donut() {
  return (
    <div className="w-full max-w-sm">
      <Chart
        kind="donut"
        title="Share of categories"
        series={[
          {
            id: 'share',
            label: 'Share of categories',
            data: [
              { x: 'Category A', y: 40 },
              { x: 'Category B', y: 25 },
              { x: 'Category C', y: 20 },
              { x: 'Category D', y: 15 },
            ],
          },
        ]}
      />
    </div>
  );
}

Sparkline

Chart.Sparkline is a small line without axes or tooltip. Put it in the trend slot of a StatCard. With label a screen reader reads its name; without it the sparkline is decoration and hidden.

Active items

3.420

artış 12 %vs previous month

LightDark

Copy code

import { Chart, StatCard } from '@bigbang/ui';

export default function Sparkline() {
  return (
    <div className="w-full max-w-sm">
      <StatCard
        label="Active items"
        value="3.420"
        delta={{ value: '12 %', direction: 'up' }}
        period="vs previous month"
        trend={<Chart.Sparkline tone="positive" data={[4, 6, 5, 9, 8, 12, 11]} label="Trend of the last six months" />}
      />
    </div>
  );
}

Data table

Every chart has a semantic table. The default table="toggle" adds a button that swaps the chart for the table. table="visible" shows both.

Monthly values

Monthly values

Kategori	First series
January	12
February	18
March	15
April	24
May	30
June	28

LightDark

Copy code

import { Chart } from '@bigbang/ui';

const months = ['January', 'February', 'March', 'April', 'May', 'June'];
const first = [12, 18, 15, 24, 30, 28];

const toPoints = (values: number[]) => values.map((y, index) => ({ x: months[index] ?? '', y }));

export default function Table() {
  return (
    <div className="w-full max-w-2xl">
      <Chart
        kind="area"
        title="Monthly values"
        height="sm"
        table="visible"
        series={[{ id: 'first', label: 'First series', data: toPoints(first) }]}
      />
    </div>
  );
}

Light and dark mode

The chart reads its colours at run time from the tokens of the selected brand and mode, and redraws when either changes.

Light

Monthly values

Tablo olarak göster

Values of two series from January to June.

Dark

Monthly values

Tablo olarak göster

Values of two series from January to June.

Copy code

import { Chart } from '@bigbang/ui';

const months = ['January', 'February', 'March', 'April', 'May', 'June'];
const first = [12, 18, 15, 24, 30, 28];
const second = [8, 11, 17, 14, 19, 26];

const toPoints = (values: number[]) => values.map((y, index) => ({ x: months[index] ?? '', y }));

export default function Line() {
  return (
    <div className="w-full max-w-2xl">
      <Chart
        kind="line"
        title="Monthly values"
        description="Values of two series from January to June."
        series={[
          { id: 'first', label: 'First series', data: toPoints(first) },
          { id: 'second', label: 'Second series', data: toPoints(second) },
        ]}
      />
    </div>
  );
}