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 -

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