Bar Chart
A bar chart component UI is a visual representation of data using rectangular bars. These charts are commonly used to compare quantities across different categories.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { BarChart } from 'bio-bind-ui';<BarChart
data={{
datasets: [
{
backgroundColor: [
'#34ADC0',
'#B0DFE7',
'#FF6E00',
'#FFD2B0',
'#F79009',
'#FEF0C7',
],
data: [800, null, null, null, null, null],
label: 'Data 1',
skipNull: true,
},
{
backgroundColor: [
'#34ADC0',
'#B0DFE7',
'#FF6E00',
'#FFD2B0',
'#F79009',
'#FEF0C7',
],
data: [null, 200, null, null, null, null],
label: 'Data 2',
skipNull: true,
},
{
backgroundColor: [
'#34ADC0',
'#B0DFE7',
'#FF6E00',
'#FFD2B0',
'#F79009',
'#FEF0C7',
],
data: [null, null, 400, null, null, null],
label: 'Data 3',
skipNull: true,
},
{
backgroundColor: [
'#34ADC0',
'#B0DFE7',
'#FF6E00',
'#FFD2B0',
'#F79009',
'#FEF0C7',
],
data: [null, null, null, 600, null, null],
label: 'Data 4',
skipNull: true,
},
{
backgroundColor: [
'#34ADC0',
'#B0DFE7',
'#FF6E00',
'#FFD2B0',
'#F79009',
'#FEF0C7',
],
data: [null, null, null, null, 900, null],
label: 'Data 5',
skipNull: true,
},
{
backgroundColor: [
'#34ADC0',
'#B0DFE7',
'#FF6E00',
'#FFD2B0',
'#F79009',
'#FEF0C7',
],
data: [null, null, null, null, null, 250],
label: 'Data 6',
skipNull: true,
},
],
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
}}
id='bar-chart'
mode='light'
name='Bar Chart Vertical'
options={{
plugins: {
legend: {
position: 'top',
},
},
scales: {
x: {
title: {
display: true,
text: 'Month',
},
},
y: {
max: 1000,
min: 0,
ticks: {
maxTicksLimit: 1000,
stepSize: 100,
},
title: {
display: true,
text: 'Value',
},
},
},
}}
size='md'
width={700}
/>Examples
Size (Optional)
Use size for change the size of bar chart component: sm, md, lg
Vertical (Optional)
Vertical flag of the chart: horizontal or vertical
Props
| Props | Required | Default | Type | Description |
|---|---|---|---|---|
| id | true | - | string | A unique identifier for the chart component. This ID is used for referencing or targeting the chart in other parts of the application. |
| name | true | - | string | The name of the chart component. This can be used for labeling or identifying the chart within the UI. |
| data | true | - | ChartData<'bar'> | The main data input for the chart. It includes labels for the x-axis and datasets containing the values and styles for the bars. |
| options | false | - | ChartOptions<'bar'> | An optional configuration object that allows customization of the chart’s appearance or behavior, such as colors, axis labels, or display preferences. |
| mode | false | light | light dark | The mode of the chart bar. Determines whether the chart uses a light or dark theme. |
| size | false | md | sm md lg | The size of the chart bar. Can be small (sm), medium (md), or large (lg). |
| width | false | - | number | The width of the chart bar. |
| height | false | - | number | The height of the chart bar. |
| horizontal | false | - | boolean | A flag to determine whether the bar chart should be rendered horizontally. |