Pie chart

Vanilla JS

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

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

React

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

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

Per-slice colours

Map a row field to a colour with colorField + colorMap. See the per-datum colours guide for the full resolution chain.

chart.setData(traffic, {
  labelField: 'source',
  valueField: 'visits',
  colorField: 'source',
  colorMap: {
    'Organic Search': '#5b8cff',
    Direct: '#22c55e',
    Social: '#f59e0b',
  },
});

Reference

• Class: PieChart
• React component: Pie