Doughnut Chart
A donut chart is a type of pie chart that displays data in the form of circular segments with an empty center, often used to represent proportions.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import id.co.biofarma.binduiandroid.components.doughnutchart.BiofarmaDoughnutChartBiofarmaDoughnutChart(
labels = labels,
values = values,
size = size,
legendPosition = legendPosition,
centerValue = centerValue
)Examples
Size
Use size parameter to set the size of the chart. There are three sizes available: sm, md and lg.
Legend Position
Use legendPosition parameter to set the position of the legend.
Center Value of Chart
Use centerValue parameter to set the specific data in the circle.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | false | - | String | A unique identifier for the pie chart. |
| size | false | md | sm md lg | Size of pie chart. |
| legendPosition | false | - | top bottom | Locations of the legend. |
| labels | false | List<> | List<String> | The labels corresponding to the data list. |
| values | false | List<> | List<Double> | The values corresponding to the data list. |
| centerValue | false | “ | String | The value corresponding to the specific data in the circle. |