Pie Chart
Pie charts express portions of a whole, using arcs or angles within a circle.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { PieChart } from 'bio-bind-ui';<PieChart
data={{
datasets: [
{
backgroundColor: ['#0098B0', '#12B76A', '#FF6E00', '#FFC733'],
borderWidth: 0,
data: [700, 400, 300, 200],
label: 'Dataset',
},
],
labels: ['Dataset 1', 'Dataset 2', 'Dataset 3', 'Dataset 4'],
}}
id='pie-chart-preview'
mode='light'
options={{
plugins: {
legend: {
position: 'top',
},
},
}}
size='md'
/>Examples
Size
Set the size prop to sm, md, or lg.
Legend (optional)
Use position and set to top, right, left, or bottom to place legend position
Mode (optional)
Use mode to use dark or light
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | false | - | string | A unique identifier for the pie chart. |
| data | true | {{}} | object | Object to define labels[] and datasets[]. |
| options | false | {{}} | object | Object to configure options for the chart. |
| plugins | false | {{}} | object | Object to configure plugins for the chart. |
| mode | false | light | light dark | The theme mode of the pie chart (light or dark). |
| size | false | - | sm md lg | Size of pie chart. |
| width | false | - | number[] | string | Set the width of pie chart. |
| height | false | - | number[] | string | Set the height of pie chart. |
| hideLegend | false | false | true false | Show and hide the chart legend. |