Skip to main content

Bar

The Bar component is used to display bar charts. You can do stacked or dodged (grouped) bars as well as vertical or horizontal orientation. It's also possible to define tooltips and on-click popovers for the bars using the ChartTooltip and ChartPopover components respectively as children. Trendlines can be added as well using the Trendline component as a child (only average and median methods are supported for bar). Bar annotations can be added using the Annotation component as a child.

If you only have one series in your data, both the type and color props can be ignored.

Examples:

Horizontal Bar

<Chart data={data}>
<Axis position="bottom" grid ticks title="Downloads" />
<Axis position="left" baseline title="Browser" />
<Bar
name="Bar Chart"
orientation="horizontal"
dimension="browser"
metric="views"
/>
</Chart>

Horizontal bar chart Horizontal bar chart

Vertical Bar

<Chart data={data}>
<Axis position="bottom" baseline title="Browser" />
<Axis position="left" grid ticks title="Downloads" />
<Bar
name="Vertical Bar"
orientation="vertical"
dimension="browser"
metric="downloads"
/>
</Chart>

Vertical bar chart Vertical bar chart

Stacked Bar

<Chart data={data}>
<Axis position="bottom" grid title="Downloads" />
<Axis position="left" baseline title="Browser" />
<Bar
name="Bar Chart"
orientation="horizontal"
type="stacked"
color="operatingSystem"
dimension="browser"
metric="downloads"
/>
<Legend position="top" title="Operating system" />
</Chart>

Horizontal stacked bar chart Horizontal stacked bar chart

Dodged Bar

<Chart data={data}>
<Axis position="bottom" grid title="Downloads" />
<Axis position="left" baseline title="Browser" />
<Bar
name="Bar Chart"
orientation="horizontal"
type="dodged"
color="operatingSystem"
dimension="browser"
metric="downloads"
/>
<Legend position="top" title="Operating system" />
</Chart>

Horizontal dodged bar chart Horizontal dodged bar chart

Trellised Bar

<Chart data={data}>
<Axis
grid
position="left"
title="Users, Count"
/>
<Axis
baseline
position="bottom"
title="Platform"
/>
<Bar
color="bucket"
dimension="platform"
order="order"
orientation="vertical"
trellis="event"
trellisOrientation="horizontal"
type="stacked"
>
</Bar>
<Legend />
</Chart>

Trellis dodged bar chart Trellis dodged bar chart

Props

nametypedefaultdescription
childrenAnnotation | ChartTooltip | ChartPopover | TrendlineOptional elements that can be rendered within the chart.
colorstring | [string, string]'series'The key in the data that defines what color that bar will be, or a dual facet array for more complex color mapping. This is not a color value itself but rather the key in the data that will map to the colors scale.
For example: A stacked bar chart that has a different color for each operating system, color would be set to the name of the key in the data that defines which operating system it is (color="operatingSystem").
dimensionstring'category'The key in the data that is used for the categories of the bar.
dimensionDataTypestringData type field used for the bar categories (x-axis for a vertical bar).
dualMetricAxisbooleanfalseWhether to scale the last series in the data separately using the secondary metric axis.
groupedPaddingnumber (0-1)-Defines the padding around each bar within a group of bars. Allows setting different paddings between grouped and non-grouped bars. A groupedPadding of 0 will result in 0px between bars. For more details, see the Vega band scale docs.
hasSquareCornersbooleanfalseForces bars to be square on top instead of using default rounded corners.
lineTypestring | [string, string]'solid'Line type or key in the data that is used as the line type facet. Can be a dual facet array for more complex line type mapping.
lineWidthnumber0Border width of the bar.
namestringBar name. Useful for if you need to traverse the chart object to find this bar.
opacitystring | {value: number} | [string, string]{value: 1}If a string is provided, this string is the key in the data that bars will be grouped into series by. Each unique value for this key in the provided data will map to an opacity from the opacities scale. Can also be a dual facet array for more complex opacity mapping.
orderstringThe key in the data that sets the order that the bars get stacked/grouped in. For a vertical bar, order goes from bottom to top (stacked) and left to right (dodged). For a horizontal bar, order goes from left to right (stacked) and top to bottom (dodged).
orientation'horizontal' | 'vertical''vertical'Sets the orientation of the bars.
paddingRationumber (0-1)0.4Defines the padding around each bar. The padding is calculated as (paddingRatio * stepLength). "stepLength" is the distance in pixels from the center of one bar to the center of the next bar. A paddingRatio of 0 will result in 0px between bars. For more details, see the Vega band scale docs.
paddingOuternumber (0-1)Sets the chart area padding. The padding is calculated as (paddingOuter * stepLength). "stepLength" is the distance in pixels from the center of one bar to the center of the next bar. If undefined, paddingOuter is calculated based on the paddingRatio. For more details, see the Vega band scale docs.
onClickfunctionCallback that will be run when a point/section is clicked.
metricstring'value'The key in the data that is used for the height of the bar.
metricAxisstringAxis that the metric is trended against (y-axis for a vertical bar). This is used for combo charts.
trellisstringThe key in the data that defines a third grouping of the data. This creates multiple bar charts with a common axis for the metric data, while each chart labels each bar with the associated category/dimension.
trellisOrientation'horizontal' | 'vertical''horizontal'Determines the direction the trellised charts should be laid out in. Only takes effect when the "trellis" prop is defined.
trellisPaddingnumber (0-1)0.2Defines the padding between each sub-chart in the trellis. The padding is calculated as (trellisPadding * axisLength). "axisLength" is the length in pixels of one charts' axis in the direction of the trellis (i.e. x-axis for a horizontal trellis). For more details, see the Vega band scale docs.
type'dodged' | 'stacked''stacked'Defines if multiple series should be grouped side-by-side (dodged) or stacked.

Annotation

The Annotation component is used to display a text annotation. The annotation will display at the top of the bar for each data point in data.

<Chart data={data}>
<Bar {...props}>
<Annotation textKey="textKey" style={{width: 48}} />
</Bar>
</Chart>

Bar annotation chart Bar annotation chart

Props

nametypedefaultdescription
textKeystringThe key on each value in the data passed to the chart that contains the text to display in the annotation.
style{width: number}-Style overrides. Width is used in place of dynamically calculated width.