Usage

Use to show data segmented in a colour wheel.

Import

import { DonutChart } from '@passfort/castle'
content_copy
Copy

Example

<Row>
  <DonutChart data={[]} label="0" />
  <DonutChart
    data={[{ name: 'Label 1', value: 100, color: 'R100' }]}
    label="100"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'G100' },
    ]}
    label="50"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'O100' },
      { name: 'Label 3', value: 100, color: 'G100' },
    ]}
    label="33"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'O100' },
      { name: 'Label 3', value: 100, color: 'G100' },
      { name: 'Label 4', value: 100, color: 'B100' },
    ]}
    label="25"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'O100' },
      { name: 'Label 3', value: 100, color: 'G100' },
      { name: 'Label 4', value: 100, color: 'B100' },
      { name: 'Label 5', value: 100, color: 'P100' },
    ]}
    label="20"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'O100' },
      { name: 'Label 3', value: 100, color: 'G100' },
      { name: 'Label 4', value: 100, color: 'B100' },
      { name: 'Label 5', value: 100, color: 'P100' },
      { name: 'Label 6', value: 100, color: 'N100' },
    ]}
    label="16.67"
  />
</Row>
<Row>
  <DonutChart data={[]} label="0" />
  <DonutChart
    data={[{ name: 'Label 1', value: 100, color: 'R100' }]}
    label="100"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'G100' },
    ]}
    label="50"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'O100' },
      { name: 'Label 3', value: 100, color: 'G100' },
    ]}
    label="33"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'O100' },
      { name: 'Label 3', value: 100, color: 'G100' },
      { name: 'Label 4', value: 100, color: 'B100' },
    ]}
    label="25"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'O100' },
      { name: 'Label 3', value: 100, color: 'G100' },
      { name: 'Label 4', value: 100, color: 'B100' },
      { name: 'Label 5', value: 100, color: 'P100' },
    ]}
    label="20"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { name: 'Label 2', value: 100, color: 'O100' },
      { name: 'Label 3', value: 100, color: 'G100' },
      { name: 'Label 4', value: 100, color: 'B100' },
      { name: 'Label 5', value: 100, color: 'P100' },
      { name: 'Label 6', value: 100, color: 'N100' },
    ]}
    label="16.67"
  />
</Row>
content_copy
Copy
live example

Incomplete charts

<Row>
  <DonutChart data={[]} label="0" />
  <DonutChart
    data={[{ name: 'Label 1', value: 100, color: 'R100' }]}
    label="100"
  />
  <DonutChart
    data={[{ name: 'Label 1', value: 100, color: 'R100' }, { value: 100 }]}
    label="50"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { value: 100 },
      { value: 100 },
    ]}
    label="33"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { value: 100 },
      { value: 100 },
      { value: 100 },
    ]}
    label="25"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { value: 100 },
      { value: 100 },
      { value: 100 },
      { value: 100 },
    ]}
    label="20"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { value: 100 },
      { value: 100 },
      { value: 100 },
      { value: 100 },
      { value: 100 },
    ]}
    label="16.67"
  />
</Row>
<Row>
  <DonutChart data={[]} label="0" />
  <DonutChart
    data={[{ name: 'Label 1', value: 100, color: 'R100' }]}
    label="100"
  />
  <DonutChart
    data={[{ name: 'Label 1', value: 100, color: 'R100' }, { value: 100 }]}
    label="50"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { value: 100 },
      { value: 100 },
    ]}
    label="33"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { value: 100 },
      { value: 100 },
      { value: 100 },
    ]}
    label="25"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { value: 100 },
      { value: 100 },
      { value: 100 },
      { value: 100 },
    ]}
    label="20"
  />
  <DonutChart
    data={[
      { name: 'Label 1', value: 100, color: 'R100' },
      { value: 100 },
      { value: 100 },
      { value: 100 },
      { value: 100 },
      { value: 100 },
    ]}
    label="16.67"
  />
</Row>
content_copy
Copy
live example

Unequal segments

<DonutChart
  data={[
    { name: 'Label 1', value: 10, color: 'R100' },
    { name: 'Label 2', value: 20, color: 'O100' },
    { name: 'Label 3', value: 30, color: 'G100' },
    { name: 'Label 4', value: 40, color: 'B100' },
    { name: 'Label 5', value: 50, color: 'P100' },
    { name: 'Label 6', value: 60, color: 'N100' },
  ]}
  label="100"
/>
<DonutChart
  data={[
    { name: 'Label 1', value: 10, color: 'R100' },
    { name: 'Label 2', value: 20, color: 'O100' },
    { name: 'Label 3', value: 30, color: 'G100' },
    { name: 'Label 4', value: 40, color: 'B100' },
    { name: 'Label 5', value: 50, color: 'P100' },
    { name: 'Label 6', value: 60, color: 'N100' },
  ]}
  label="100"
/>
content_copy
Copy
live example