Donut chart

Vanilla JS

import { PieChart } from '@arshad-shah/swift-chart';

const chart = new PieChart('#chart', {
  theme: 'midnight',
  donut: true,
  donutWidth: 0.55,
});
chart.setData(traffic, { labelField: 'source', valueField: 'visits' });

React

import { Donut } from '@arshad-shah/swift-chart/react';

<Donut
  data={traffic}
  mapping={{ labelField: 'source', valueField: 'visits' }}
  theme="midnight"
  donutWidth={0.55}
  height={340}
/>

Common options

donutWidth

The cutout ratio (0–1). Lower values produce a thicker ring.

Reference

• Class: PieChart (with donut: true)
• React component: Donut