BarChart
BarChart
displays data as horizontal or vertical bars, supporting both grouped and stacked layouts. It's ideal for comparing values across categories, showing revenue trends, or displaying any quantitative data over time or categories.The BarChart component accommodates the size of its parent unless you set it explicitly:
<Card height="240px" width="75%">
<BarChart
layout="horizontal"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
dataKeys="{['A']}"
nameKey="sprint"
/>
</Card>
Example: dimension determined by the parent
<Card height="240px" width="75%">
<BarChart
layout="horizontal"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
dataKeys="{['A']}"
nameKey="sprint"
/>
</Card>
<Card height="240px">
<BarChart
layout="horizontal"
height="200px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
dataKeys="{['A']}"
nameKey="sprint"
/>
</Card>
Example: dimension overwritten by Barchart
<Card height="240px">
<BarChart
layout="horizontal"
height="200px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
dataKeys="{['A']}"
nameKey="sprint"
/>
</Card>
Key features:
- Flexible orientation: Choose horizontal or vertical bar layouts
- Multiple data series: Display several metrics on the same chart with different colored bars
- Stacked vs grouped: Stack bars on top of each other or place them side by side
- Custom formatting: Use
tickFormatter
to format axis labels andLabelList
for data labels
Properties
data
This property is used to provide the component with data to display.The data needs to be an array of objects.
dataKeys
This property specifies the keys in the data objects that should be used for rendering the bars.E.g. 'id' or 'key'.
hideTickX
(default: false)
Controls the visibility of the X-axis ticks. If set to
true
, tick labels on the X-axis will be hidden.hideTickY
(default: false)
Controls the visibility of the Y-axis ticks. If set to
true
, tick labels on the Y-axis will be hidden.hideX
(default: false)
Determines whether the X-axis should be hidden. If set to
true
, the axis will not be rendered.hideY
(default: false)
Determines whether the Y-axis should be hidden. If set to
true
, the axis will not be rendered.layout
(default: "vertical")
This property determines the orientation of the bar chart. The
vertical
variant specifies the horizontal axis as the primary and lays out the bars from left to right. The horizontal
variant specifies the vertical axis as the primary and has the bars spread from top to bottom.Available values:
horizontal
, vertical
(default)nameKey
Specifies the key in the data objects that will be used to label the different data series.
showLegend
(default: false)
Determines whether the legend should be displayed.
stacked
(default: false)
This property determines how the bars are laid out.If set to
true
, bars with the same category will be stacked on top of each other rather than placed side by side.tickFormatterX
A function that formats the tick labels on the X-axis.
<App>
<BarChart
layout="horizontal"
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
dataKeys="{['A']}"
nameKey="sprint"
tickFormatterX="{(value) => '(' + value + ')'}"
/>
</App>
Example: tickFormatterX
<App>
<BarChart
layout="horizontal"
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
dataKeys="{['A']}"
nameKey="sprint"
tickFormatterX="{(value) => '(' + value + ')'}"
/>
</App>
tickFormatterY
A function that formats the tick labels on the Y-axis.
<App>
<BarChart
layout="horizontal"
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
dataKeys="{['A']}"
nameKey="sprint"
tickFormatterY="{(value) => '$' + value}"
/>
</App>
Example: tickFormatterY
<App>
<BarChart
layout="horizontal"
height="240px"
data="{[
{ 'sprint': 'Sprint 1', 'A': 44 },
{ 'sprint': 'Sprint 2', 'A': 32 },
{ 'sprint': 'Sprint 3', 'A': 48 },
{ 'sprint': 'Sprint 4', 'A': 72 }
]}"
dataKeys="{['A']}"
nameKey="sprint"
tickFormatterY="{(value) => '$' + value}"
/>
</App>
Events
This component does not have any events.
Exposed Methods
This component does not expose any methods.
Styling
This component does not have any styles.