Skip to main content
Evidence provides powerful, customizable chart components that turn your SQL queries into beautiful visualizations. This guide covers all chart types with real examples.

​
Chart Fundamentals

All Evidence charts follow a similar pattern: 
<ChartType 
  data={your_query_result}
  x="column_for_x_axis"
  y="column_for_y_axis"
/>
Charts automatically:
  • Detect data types (dates, numbers, categories)
  • Format axes and labels
  • Provide interactive tooltips
  • Enable download as image or CSV

​
Line Charts

Perfect for time series and trends.
1

Basic Line Chart

Create a query for time-series data:
orders_by_month
SELECT 
  DATE_TRUNC('month', order_datetime) as month,
  SUM(sales) as total_sales,
  COUNT(*) as num_orders
FROM orders
GROUP BY DATE_TRUNC('month', order_datetime)
ORDER BY month
Create the chart:
<LineChart 
  data={orders_by_month}
  x="month"
  y="total_sales"
  yAxisTitle="Sales per Month"
  yFmt="usd"
/>
2

Multi-Series Line Chart

Show multiple lines on one chart:
sales_by_category
SELECT 
  DATE_TRUNC('month', order_datetime) as month,
  category,
  SUM(sales) as total_sales
FROM orders
GROUP BY month, category
ORDER BY month

<LineChart 
  data={sales_by_category}
  x="month"
  y="total_sales"
  series="category"
/>
3

Multiple Y Axes

Compare metrics with different scales:
<LineChart 
  data={orders_by_month}
  x="month"
  y="total_sales"
  y2="num_orders"
  y2SeriesType="bar"
  labels="true"
/>
This shows sales as a line and orders as bars on a secondary axis.

​
Line Chart Options

  • step=true - Create step charts
  • yLog=true - Use logarithmic scale
  • labels=true - Show value labels
  • colorPalette={['#cf0d06', '#eb5752']} - Custom colors

​
Bar Charts

Ideal for comparing categories.
1

Basic Bar Chart

orders_by_category
SELECT 
  category,
  SUM(sales) as total_sales,
  COUNT(*) as num_orders
FROM orders
GROUP BY category
ORDER BY total_sales DESC

<BarChart
  data={orders_by_category}
  x="category"
  y="total_sales"
  xAxisTitle="Category"
/>
2

Horizontal Bar Chart

Better for long category names:
<BarChart
  data={orders_by_category}
  x="category"
  y="total_sales"
  swapXY="true"
  sort="true"
/>
3

Stacked Bar Chart

Show composition over time:
orders_by_month_category
SELECT 
  DATE_TRUNC('month', order_datetime) as month,
  category,
  SUM(sales) as total_sales
FROM orders
WHERE YEAR(order_datetime) = 2021
GROUP BY month, category

<BarChart 
  data={orders_by_month_category}
  x="month"
  y="total_sales"
  series="category"
  labels="true"
/>
4

Grouped Bar Chart

Compare categories side-by-side:
<BarChart 
  data={orders_by_month_category}
  x="month"
  y="total_sales"
  series="category"
  type="grouped"
/>

​
Bar Chart Options

  • swapXY=true - Create horizontal bars
  • type=grouped - Group bars instead of stacking
  • labels=true - Show value labels
  • stackTotalLabel=false - Hide total labels on stacked bars
  • sort=true - Automatically sort by value

​
Area Charts

Show cumulative values and trends. 
<AreaChart
  data={orders_by_category}
  x="month"
  y="total_sales"
  series="category"
/>

​
Area Chart Types

Stacked Area (default): 
<AreaChart 
  data={sales_by_category}
  x="month"
  y="total_sales"
  series="category"
/>
100% Stacked Area: 
<AreaChart 
  data={sales_by_category}
  x="month"
  y="total_sales"
  series="category"
  type="stacked100"
/>
Single Area with Custom Color: 
<AreaChart
  data={sales_by_category.filter(d => d.category === 'Electronics')}
  x="month"
  y="total_sales"
  lineColor="red"
/>

​
Advanced Features

​
Reference Lines

Add target lines or thresholds: 
<BarChart
  data={orders_by_category}
  x="category"
  y="total_sales"
>
  <ReferenceLine y=50000lt;ReferenceLine y="50000" label="Target" />
  <ReferenceLine y=75000lt;ReferenceLine y="75000" label="Stretch Goal" hideValue=false />
</BarChart>

​
Filtering Data

Use JavaScript to filter query results: 
<AreaChart 
  data={orders_by_category.filter(d => d.category === 'Sinister Toys')}
  x="month"
  y="total_sales"
  legend="false"
/>

​
Custom Formatting

Control how values display: 
<LineChart 
  data={orders_by_month}
  x="month"
  y="total_sales"
  yFmt=usd0k          # $45k
  xFmt='mmm d'        # Jan 15
/>
Common format codes:
  • usd - $1,234.56
  • usd0 - $1,235
  • usd0k - $12k
  • pct - 45.2%
  • num - 1,234.56
  • #,##0.00 - Custom number format

​
Custom Height

Adjust chart size: 
<BarChart 
  data={orders_by_category}
  x="category"
  y="total_sales"
  chartAreaHeight=500
/>

​
ECharts Customization

Evidence uses Apache ECharts under the hood. You can pass custom options: 
<BarChart
  data={orders_by_category}
  x="category"
  y="total_sales"
  echartsOptions={{
    textStyle: {
      fontFamily: "Inter"
    },
    grid: {
      left: '50px',
      right: '50px'
    }
  }}
/>

​
Real-World Examples

​
Sales Dashboard

---
title: Sales Performance
queries:
  - orders_by_month: orders_by_month.sql
  - orders_by_category: orders_by_category.sql
---

# Sales Performance Dashboard

## Monthly Revenue Trend

<LineChart 
  data={orders_by_month}
  x="month"
  y="total_sales"
  yAxisTitle="Revenue"
  yFmt="usd0k"
  labels="true"
/>

## Category Breakdown

<BarChart 
  data={orders_by_category}
  x="category"
  y="total_sales"
  swapXY="true"
  sort="true"
>
  <ReferenceLine y=100000lt;ReferenceLine y="100000" label="Category Target" />
</BarChart>

## Category Trends

```sql category_trends
SELECT 
  DATE_TRUNC('month', order_datetime) as month,
  category,
  SUM(sales) as sales
FROM orders
WHERE order_datetime >= CURRENT_DATE - INTERVAL '12 months'
GROUP BY month, category


### Comparison Charts

```markdown
## Sales vs Orders

<LineChart 
  data={orders_by_month}
  x="month"
  y="total_sales"
  y2="num_orders"
  y2SeriesType="bar"
  colorPalette={['rgb(110,117,176,0.8)','rgb(37,91,161)']}
  labels="true"
/>

​
Additional Chart Types

Evidence supports many more chart types:
  • ScatterPlot - Correlations and distributions
  • BubbleChart - Three-dimensional comparisons
  • Histogram - Frequency distributions
  • BoxPlot - Statistical distributions
  • Heatmap - Matrix visualizations
  • Sankey - Flow diagrams
  • Funnel - Conversion funnels
See the Evidence docs for complete details on each chart type.

​
Data Tables

Display raw data with rich formatting: 
<DataTable data={orders_by_category} />

​
Enhanced Tables

<DataTable 
  data={orders_by_category}
  search="true"
  rowNumbers="true"
  rows=20
>
  <Column id=categorylt;Column id="category" />
  <Column id=total_saleslt;Column id="total_sales" fmt="usd0k" contentType=colorscale />
  <Column id=num_orderslt;Column id="num_orders" contentType=bar />
</DataTable>
Column content types:
  • colorscale - Color-coded values
  • bar - Inline bar visualization
  • link - Clickable links
  • sparkline - Inline sparkline charts

​
Best Practices

​
Choose the Right Chart

  • Time series → Line or Area chart
  • Comparisons → Bar chart
  • Composition → Stacked bar or Area chart
  • Distribution → Histogram or Box plot
  • Correlation → Scatter plot

​
Simplify Visuals

  • Limit series - Too many lines/bars create clutter
  • Filter data - Show top 10, not all 100 categories
  • Use color purposefully - Highlight key insights
  • Add context - Use reference lines for targets

​
Format for Readability

  • Appropriate precision - Use usd0 instead of usd for large numbers
  • Consistent scales - Compare apples to apples
  • Clear labels - Set xAxisTitle and yAxisTitle
  • Readable dates - Format with xFmt='mmm yyyy'

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us