← Back to Components
BarChart
dataVertical bar chart for comparing categorical data
Parameters
datavalueKeylabelKeywidthheightcolorsshowGridshowLabelsPreview
Loading preview...
Example
{
"version": "1.0",
"state": {
"salesData": {
"type": "list",
"initial": [
{ "month": "Jan", "value": 12 },
{ "month": "Feb", "value": 19 },
{ "month": "Mar", "value": 15 },
{ "month": "Apr", "value": 25 },
{ "month": "May", "value": 22 }
]
}
},
"actions": [],
"view": {
"kind": "component",
"name": "BarChart",
"props": {
"data": { "expr": "state", "name": "salesData" },
"valueKey": { "expr": "lit", "value": "value" },
"labelKey": { "expr": "lit", "value": "month" },
"width": { "expr": "lit", "value": 400 },
"height": { "expr": "lit", "value": 300 },
"showGrid": { "expr": "lit", "value": true },
"showLabels": { "expr": "lit", "value": true }
}
}
}Installation
Copy component files from:
node_modules/@constela/ui/components/bar-chart/