Skip to main content
Evidence provides a comprehensive set of chart components for data visualization. All charts are built on Apache ECharts and support extensive customization.

​
Available Chart Types

BarChart

Vertical and horizontal bars, stacked and grouped

LineChart

Time series and trend lines

AreaChart

Filled area charts and stacked areas

ScatterPlot

Scatter and bubble charts

BubbleChart

Sized bubbles for 3-dimensional data

Heatmap

Color-coded matrix visualizations

BoxPlot

Distribution and quartile analysis

FunnelChart

Conversion funnels and pipelines

SankeyDiagram

Flow and relationship diagrams

​
BarChart

Bar charts are ideal for comparing categories or showing changes over time.

​
Basic Bar Chart

```sql orders_by_category
SELECT 
  category,
  SUM(sales) as total_sales
FROM orders
GROUP BY category
ORDER BY total_sales DESC


### Stacked Bar Chart

Show multiple series stacked on top of each other:

```markdown
<BarChart 
  data={orders_by_category_2021} 
  x="month" 
  y="sales"
  series="category"
  labels="true"
/>

​
Grouped Bar Chart

Display series side-by-side for comparison: 
<BarChart 
  data={orders_by_category_2021} 
  x="month" 
  y="sales"
  series="category" 
  type="grouped"
/>

​
Horizontal Bar Chart

Swap axes with swapXY=true: 
<BarChart
  data={orders_by_category}
  x="category"
  y="total_sales"
  swapXY="true"
/>

​
Props

​
data
QueryResult
required
Query result containing the data to visualize
​
x
string
required
Column name for x-axis
​
y
string | string[]
required
Column name(s) for y-axis values
​
series
string
Column name for grouping data into multiple series
​
type
'stacked' | 'grouped' | 'stacked100'
default:"stacked"
Bar chart type
​
swapXY
boolean
default:"false"
Create horizontal bar chart
​
labels
boolean
default:"false"
Show value labels on bars
​
stackTotalLabel
boolean
default:"true"
Show total label on stacked bars
​
yLog
boolean
default:"false"
Use logarithmic scale for y-axis
​
colorPalette
string | string[]
default:"default"
Color palette or array of colors

​
LineChart

Line charts are perfect for showing trends over time.

​
Basic Line Chart

```sql monthly_revenue
SELECT 
  DATE_TRUNC('month', order_date) as month,
  SUM(revenue) as revenue
FROM orders
GROUP BY 1
ORDER BY 1


### Multiple Series

```markdown
<LineChart
  data={sales_by_region}
  x="month"
  y="revenue"
  series="region"
/>

​
Step Line

<LineChart
  data={data}
  x="month"
  y="value"
  step="true"
  stepPosition="middle"
/>

​
AreaChart

Area charts are similar to line charts but with filled areas below the line.

​
Basic Area Chart

<AreaChart
  data={orders_by_category}
  x="month"
  y="sales"
/>

​
Stacked Area

<AreaChart 
  data={orders_by_category} 
  x="month" 
  y="sales"
  series="category"
/>

​
100% Stacked Area

<AreaChart 
  data={orders_by_category} 
  x="month" 
  y="sales"
  series="category"
  type="stacked100"
/>

​
ScatterPlot

Scatter plots show the relationship between two variables. 
```sql customer_metrics
SELECT 
  customer_id,
  total_orders,
  total_revenue,
  customer_segment
FROM customer_summary


## BubbleChart

Bubble charts add a third dimension with bubble size.

```markdown
<BubbleChart
  data={products}
  x="price"
  y="sales_volume"
  size="profit_margin"
  series="category"
/>

​
BoxPlot

Box plots show data distribution and quartiles. 
<BoxPlot
  data={sales_data}
  name="product"
  min="min_value"
  q1="q1_value"
  median="median_value"
  q3="q3_value"
  max="max_value"
/>

​
Advanced Features

​
Reference Lines

Add reference lines to any chart: 
<BarChart data={data} x="category" y=sales>
  <ReferenceLine y=34234 label="Sales Target" hideValue=false/>
</BarChart>

​
Reference Areas

<LineChart data={data} x="date" y="value>"
  <ReferenceArea xMin='2021-01-01' xMax='2021-03-31' label="Q1" color="blue"/>
</LineChart>

​
Multiple Y-Axes

Display two metrics with different scales: 
<BarChart 
  data={orders_by_month} 
  x="month" 
  y="sales"
  y2="num_orders"
  y2SeriesType="line"
/>

​
Custom ECharts Options

Extend any chart with custom ECharts configuration: 
<BarChart
  data={data}
  x="category"
  y="value"
  echartsOptions={{
    textStyle: {
      fontFamily: "Inter"
    },
    grid: {
      right: '50px',
      top: '10px'
    }
  }}
/>

​
Common Props

These props are available on most chart components:
​
title
string
Chart title displayed above the chart
​
subtitle
string
Chart subtitle displayed below the title
​
xAxisTitle
string
Label for the x-axis
​
yAxisTitle
string
Label for the y-axis
​
legend
boolean
default:"true"
Show or hide the legend
​
xGridlines
boolean
default:"false"
Show vertical gridlines
​
yGridlines
boolean
default:"true"
Show horizontal gridlines
​
chartAreaHeight
number
Height of chart area in pixels
​
downloadableData
boolean
default:"true"
Enable data download button
​
downloadableImage
boolean
default:"true"
Enable image download button
​
connectGroup
string
Connect multiple charts for synchronized interactions

​
Formatting

​
Value Formatting

Use fmt props to control number display:
  • yFmt=usd - US Dollar format
  • yFmt=eur - Euro format
  • yFmt=pct - Percentage format
  • yFmt=num0 - Integer format
  • yFmt=num2 - 2 decimal places

​
Date Formatting

Evidence automatically detects date columns. Customize with xFmt: 
<LineChart
  data={data}
  x="date"
  y="value"
  xFmt="MMM yyyy"
/>

​
Best Practices

  1. Choose the right chart type - Use bar charts for categories, line charts for trends
  2. Limit series count - Too many series makes charts hard to read
  3. Add context - Use titles, axis labels, and reference lines
  4. Consider color - Use colorPalette for consistent branding
  5. Optimize for mobile - Charts are responsive by default

​
Next Steps

Tables

Display data in interactive tables

Inputs

Add filters and interactivity

Build docs developers (and LLMs) love

Get started for freeTalk to us