Chart Radar
Radar chart is a type of chart used to depict multivariate data in two-dimensional form. Data is displayed in the form of axes that shine like spokes on a wheel, and each axis represents a different dimension or variable.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { RadarChart } from 'bio-bind-ui';<RadarChart
data={{
datasets: [
{
backgroundColor: 'transparent',
borderColor: '#E86400',
borderWidth: 1,
data: [18, 14, 18, 13, 14, 12],
label: 'Dataset 1',
pointBackgroundColor: '#E86400',
},
{
backgroundColor: 'transparent',
borderColor: '#0098B0',
borderWidth: 1,
data: [13, 14, 19, 16, 15, 11],
label: 'Dataset 2',
pointBackgroundColor: '#0098B0',
},
{
backgroundColor: 'transparent',
borderColor: '#F04438',
borderWidth: 1,
data: [13, 14, 19, 16, 15, 10],
label: 'Dataset 3',
pointBackgroundColor: '#F04438',
},
],
labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5'],
}}
id='radar-chart'
legendPosition='top'
mode='light'
size='md'
/>Examples (optional)
Size
Use the size sm, md, or lg to change the size of the radar chart.
Mode (optional)
Use the mode light or dark to change the mode of the radar chart.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | true | - | string | A unique identifier for the radar chart. |
| data | false | - | ChartData<'radar'> | The data object required by Chart.js to render the radar chart. It includes labels for the x-axis and datasets containing the values and styles for the radar. |
| option | false | - | ChartOptions<'radar'> | Optional configuration options for the radar chart. These options control the chart behavior, responsiveness, and appearance. |
| plugins | false | - | Plugin<"radar">[]> | To host and manage a set of plugins of type radar, which can provide additional functionality related to radar technology in an application. |
| mode | false | light | light dark | The theme mode of the radar chart (light or dark). |
| size | true | md | sm md lg | The size of the radar chart. |
| width | false | - | number | Value information from the width of the radar chart. |
| height | false | - | number | Value information from the height of the radar chart. |
| hideLegend | false | false | boolean | If true, the legend information of the radar chart will be hidden. |
| legendPosition | false | top | top bottom right left | The legend position of the radar chart. |