Chart Doughnut
Doughnut charts are used to illustrate the proportion or percentage of a whole, by dividing the circle into sections that represent certain parts of the total.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { DoughnutChart } from 'bio-bind-ui';<DoughnutChart
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='doughnut-chart'
mode='light'
options={{
plugins: {
legend: {
position: 'top',
},
},
}}
showPercentage
size='sm'
/>Examples (optional)
Size
Use the size sm, md, or lg to change the size of the doughnut chart.
Mode (optional)
Use the mode light or dark to change the mode of the doughnut chart.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | true | - | string | A unique identifier for the doughnut chart. |
| data | false | - | ChartData<'doughnut'> | The data object required by Chart.js to render the doughnut chart. It includes labels for the x-axis and datasets containing the values and styles for the doughnut. |
| option | false | - | ChartOptions<'doughnut'> | Optional configuration options for the doughnut chart. These options control the chart behavior, responsiveness, and appearance. |
| plugins | false | - | Plugin<"doughnut">[]> | To host and manage a set of plugins of type doughnut, which can provide additional functionality related to doughnut technology in an application. |
| mode | false | light | light dark | The theme mode of the doughnut chart (light or dark). |
| size | true | md | sm md lg | The size of the doughnut chart. |
| width | false | - | number | Value information from the width of the doughnut chart. |
| height | false | - | number | Value information from the height of the doughnut chart. |
| showPercentage | false | false | boolean | If true, the percentage value will be displayed on the doughnut chart. |
| hideLegend | false | false | boolean | If true, the legend information of the doughnut chart will be hidden. |