Skip to main content

Bar Chart

bar

<BarChart 
data={query_name}
x=column_x
y=column_y
/>

Examples

Bar

bar

<BarChart 
data={value_by_region}
x=region
y=value
xAxisTitle=Region
/>

Horizontal Bar

bar

<BarChart 
data={value_by_region}
x=country
y=value
swapXY=true
/>

Stacked Bar

bar

<BarChart 
data={annual_value_by_region}
x=year
y=value
series=region
/>

100% Stacked Bar

bar

<BarChart 
data={annual_value_by_region}
x=year
y=value
series=region
type=stacked100
/>

Horizontal Stacked Bar

bar

<BarChart 
data={annual_value_by_region}
swapXY=true
x=year
y=value
series=region
xType=category
sort=false
/>

Horizontal 100% Stacked Bar

bar

<BarChart 
data={annual_value_by_region}
swapXY=true
x=year
y=value
series=region
type=stacked100
xType=category
sort=false
/>

Grouped Bar

bar

<BarChart 
data={annual_value_by_region}
x=year
y=value
series=region
type=grouped
/>

Horizontal Grouped Bar

bar

<BarChart 
data={annual_value_by_region}
swapXY=true
x=year
y=value
series=region
type=grouped
xType=category
/>

Long Bar Chart

If you create a bar chart with many x-axis items (e.g., names of departments), Evidence will extend the height of the chart for you to avoid the bars becoming squished. See Long Bar example below.

long-bar

<BarChart 
data={complaints_by_category}
x=category
y=complaints
swapXY=true
yAxisTitle="Calls Received"
/>

Props

Data

Name Description Required? Options Default
data Query name, wrapped in curly braces Yes query name -
x Column to use for the x-axis of the chart Yes column name First column
y Column(s) to use for the y-axis of the chart Yes column name | array of column names Any non-assigned numeric columns
sort Whether to apply default sort to your data. Default sort is x ascending for number and date x-axes, and y descending for category x-axes - true | false false
series Column to use as the series (groups) in a multi-series chart - column name -
xFmt Format to use for x column (see available formats) - Excel-style format | buil-in format name | custom format name -
yFmt Format to use for y column (see available formats) - Excel-style format | buil-in format name | custom format name -

Series

Name Description Required? Options Default
type Grouping method to use for multi-series charts - stacked | grouped | stacked100 stacked
stackName Name for an individual stack. If separate Bar components are used with different stackNames, the chart will show multiple stacks - string -
fillColor Color to override default series color. Only accepts a single color. - CSS name | hexademical | RGB | HSL -
fillOpacity % of the full color that should be rendered, with remainder being transparent - number (0 to 1) 1
outlineWidth Width of line surrounding each bar - number 0
outlineColor Color to use for outline if outlineWidth > 0 - CSS name | hexademical | RGB | HSL -

Chart

Name Description Required? Options Default
swapXY Swap the x and y axes to create a horizontal chart - true | false false
title Chart title. Appears at top left of chart. - string -
subtitle Chart subtitle. Appears just under title. - string -
legend Turns legend on or off. Legend appears at top center of chart. - true | false true for multiple series
chartAreaHeight Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX. - number 180
xAxisTitle Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false - true | string | false false
yAxisTitle Name to show beside y-axis. If 'true', formatted column name is used. - true | string | false false
xGridlines Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false) - true | false false
yGridlines Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false) - true | false true
xAxisLabels Turns on/off value labels on the x-axis - true | false true
yAxisLabels Turns on/off value labels on the y-axis - true | false true
xBaseline Turns on/off thick axis line (line appears at y=0) - true | false true
yBaseline Turns on/off thick axis line (line appears directly alongside the y-axis labels) - true | false false
xTickMarks Turns on/off tick marks for each of the x-axis labels - true | false false
yTickMarks Turns on/off tick marks for each of the y-axis labels - true | false false
yMin Starting value for the y-axis - number -
yMax Maximum value for the y-axis - number -
showAllXAxisLabels Force every x-axis value to be shown. This can truncate labels if there are too many. - true|false false

Annotations

Bar charts can include annotations using the ReferenceLine and ReferenceArea components. These components are used within a chart component like so:

<BarChart data={sales_data} x=date y=sales>
<ReferenceLine data={target_data} y=target label=name/>
<ReferenceArea xMin='2020-03-14' xMax='2020-05-01'/>
</BarChart>