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).

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="Page Views" />
    <Axis position="left" baseline title="Browser" />
    <Bar
        name="Bar Chart"
        orientation="horizontal"
        dimension="browser"
        metric="views"
    />
</Chart>

Vertical Bar

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

Stacked Bar

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

Dodged Bar

<Chart data={data}>
    <Axis position="bottom" gridtitle="Page Views" />
    <Axis position="left" baseline title="Browser" />
    <Bar
        name="Bar Chart"
        orientation="horizontal"
        type="dodged"
        color="operatingSystem"
        dimension="browser"
        metric="views"
    />
    <Legend position="top" title="Operating system" />
</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>

Props

name	type	default	description
children	ChartTooltip | ChartPopover | Trendline	–	Optional elements that can be rendered within the chart.
color	string	'series'	The key in the data that defines what color that bar will be. 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").
dimension	string	'category'	The key in the data that is used for the categories of the bar.
groupedPadding	number (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.
hasSquareCorners	boolean	false	Forces bars to be square on top instead of using default rounded corners.
name	string	–	Bar name. Useful for if you need to traverse the chart object to find this bar.
opacity	string | {value: number}	{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. If an object with a value is provided, this will set the opacity for bars.
order	string	–	The 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.
paddingRatio	number (0-1)	0.4	Defines 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.
paddingOuter	number (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.
subSeries	string	–	The key in the data that defines the sub series of the data. Adds an additional dimension to the bar chart. If the bar chart is a stacked bar, then the stacked bars will be dodged (grouped) by the sub series. Conversely, if the bar chart is a dodged (grouped) bar, then the dodged bars will be stacked the sub series. To configure the colors of the sub series, pass through a two dimensional array of colors (Color[][]) to Chart.
type	'dodged' | 'stacked'	'stacked'	Defines if multiple series should be grouped side-by-side (dodged) or stacked
metric	string	'value'	The key in the data that is used for the height of the bar.
trellis	string	–	The 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.
trellisPadding	number (0-1)	0.2	Defines 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.