Bar Chart

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

Examples

Bar

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

Horizontal Bar

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

Stacked Bar

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

100% Stacked Bar

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

Horizontal Stacked Bar

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

Horizontal 100% Stacked Bar

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

Grouped Bar

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

Horizontal Grouped 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.

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