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>