Charts

Line, bar and donut charts that stay readable without the picture.

Rounds per day

Rounds per day: chart data
	Demo	Real money
Mon	420	300
Tue	510	340
Wed	480	360
Thu	620	410
Fri	700	450
Sat	910	600
Sun	860	580

Wins by game

Wins by game: chart data
	Average win
Game A	12×
Game B	8×
Game C	15×

Devices

Devices: chart data
	Devices
Phone	62
Desktop	31
Tablet	7

charts.example.svelte

<script lang="ts">
  import { BarChart, DonutChart, LineChart } from '@onlywin/ui-svelte';

  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
</script>

<div class="example-grid">
  <LineChart
    title="Rounds per day"
    area
    labels={days}
    series={[
      {
        id: 'demo',
        label: 'Demo',
        values: [420, 510, 480, 620, 700, 910, 860],
      },
      {
        color: 2,
        id: 'real',
        label: 'Real money',
        values: [300, 340, 360, 410, 450, 600, 580],
      },
    ]}
  />
  <BarChart
    title="Wins by game"
    labels={['Game A', 'Game B', 'Game C']}
    formatValue={(value) => `${value}×`}
    series={[{ id: 'avg', label: 'Average win', values: [12, 8, 15] }]}
  />
  <DonutChart
    title="Devices"
    centerValue="62%"
    centerLabel="Phone"
    items={[
      { label: 'Phone', value: 62 },
      { color: 2, label: 'Desktop', value: 31 },
      { color: 3, label: 'Tablet', value: 7 },
    ]}
  />
</div>

Usage

Do

Format values with formatValue: money, percentages, counts.

Don’t

Do not use a donut for more than five parts.

Accessibility

The drawing is hidden from screen readers; a table with the same values is there for them.
Series have distinct colours and a legend; values use the locale’s numbers.

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

LineChart

LineChart props
Prop	Type	Default	Description
`area`	`boolean`	`false`	Fill under each line.
`formatValue`	`(value: number) => string`	—
`height`	`number`	`160`
`labels` *required	`ReadonlyArray<string>`	—
`series` *required	`ReadonlyArray<IUiChartSeries>`	—
`title` *required	`string`	—

BarChart

BarChart props
Prop	Type	Default
`formatValue`	`(value: number) => string`	—
`height`	`number`	`160`
`labels` *required	`ReadonlyArray<string>`	—
`series` *required	`ReadonlyArray<IUiChartSeries>`	—
`title` *required	`string`	—

DonutChart

DonutChart props
Prop	Type	Default
`centerLabel`	`string`	—
`centerValue`	`string`	—
`formatValue`	`(value: number) => string`	—
`items` *required	`ReadonlyArray<IUiDonutItem>`	—
`size`	`number`	`140`
`title` *required	`string`	—