Chart Types

Overview

Uncharted supports eight chart types, each suited for different data visualization needs.

Donut Charts

Donut charts display proportional data using CSS conic-gradient. They automatically adapt to their container width using CSS container queries.

charts:
  donut-demo:
    type: donut
    title: Browser Market Share
    showPercentages: true
    data:
      - label: Chrome
        value: 65
      - label: Safari
        value: 18
      - label: Firefox
        value: 10
      - label: Edge
        value: 7

Center Content

Display a value or label in the center of the donut:

center:
  value: total    # Display sum of all values
  label: Users    # Label below the value

Use value: total for automatic sum, or specify a custom number.

Stacked Bar Charts

Horizontal bar charts with multiple series stacked per row. Best for comparing categories with long labels.

charts:
  bar-demo:
    type: stacked-bar
    title: Team Growth
    file: charts/platform-growth.csv
    x:
      columns:
        existing: Existing
        new: New Hires

Stacked Column Charts

Vertical column charts with stacked series. Supports negative values, which stack downward from zero.

charts:
  column-demo:
    type: stacked-column
    title: Release Cadence
    file: charts/releases.csv

Rotated Labels

For long category labels, use x.rotateLabels: true:

x:
  rotateLabels: true

Line Charts

Line charts connect data points with line segments across categories. They share the same data format and axis behavior as dot charts.

charts:
  line-demo:
    type: line
    title: Monthly Temperatures
    file: charts/temperature.csv

Hiding Lines

Use lines: false to display dots without connecting lines:

lines: false

Hiding Dots

Use dots: false to show only the connecting lines:

dots: false

When dots: false is set and icons are configured, the icons appear in the legend only.

Axis Titles

Add labels to the X or Y axis:

x:
  title: Month
y:
  title: Temperature (°C)

Time-Series Charts

Time-series charts render line charts with a continuous X-axis. Unlike line charts where categories are evenly spaced, time-series charts position data points proportionally based on their actual time values—so gaps in your data appear as gaps in the chart.

charts:
  timeseries-demo:
    type: timeseries
    title: Regional Transit Ridership
    file: charts/transit-ridership.csv
    y:
      format:
        compact: true

Time-series charts support both numeric years (1971, 2024) and ISO dates (2024-02-17). Axis tick intervals are calculated automatically based on the data range.

Showing Dots

By default, time-series charts show lines without dots. Use dots: true to display dots at each data point:

dots: true

When dots: false (the default) and icons are configured, the icons appear in the legend only.

Axis Titles

Add labels to the X or Y axis:

x:
  title: Year
y:
  title: Population

Bubble Charts

Bubble charts combine categorical X-axis positioning with continuous Y values and variable-sized dots. They're ideal for showing three dimensions of data: category, value, and magnitude.

charts:
  bubble-demo:
    type: bubble
    title: Quarterly Performance
    file: charts/bubble-demo.csv
    series:
      title: Metric
    size:
      title: Market Value

Data Format

Bubble charts expect CSV data with columns for X (categorical), Y (numeric), and size (numeric). An optional series column enables multi-series grouping:

Simple (single series):

x,y,size
Q1,45,1200
Q2,78,3400
Q3,62,2100
Q4,89,4500

Multi-series:

x,y,size,series
Q1,45,1200,revenue
Q1,320,800,users
Q2,78,3400,revenue
Q2,580,1500,users

Column Detection

Bubble charts detect columns by name (case-insensitive):

If not found by name, the first three columns are used as x, y, and size respectively.

Or explicitly specify columns:

x:
  column: category
y:
  column: value
size:
  column: magnitude
  title: Market Size    # Adds size legend
series:
  column: group
  title: Group          # Legend title

Size Legend

Add a size.title to display a size legend showing min/max values:

size:
  title: Market Value

Scatter Charts

XY scatter plots with continuous axes on both dimensions. Supports negative values on both axes.

charts:
  scatter-demo:
    type: scatter
    title: Population vs GDP
    file: charts/scatter-demo.csv
    x:
      title: Population (millions)
    y:
      title: GDP (trillions)

Axis Titles

Specify axis titles in the axis configuration:

x:
  title: "Population (millions)"
y:
  title: "GDP (trillions)"

Series Grouping

If your CSV has a column named series, points are grouped and colored accordingly:

country,x,y,series
USA,330,21,Americas
China,1400,14,Asia
Germany,83,4,Europe

Or explicitly specify the column:

series:
  column: region
  title: Region    # Legend title

Size Dimension

Add a size column for variable dot sizes:

charts:
  scatter-size-demo:
    type: scatter
    title: Population, GDP & CO₂ Emissions
    file: charts/scatter-size-demo.csv
    x:
      title: Population (millions)
    y:
      title: GDP (trillions)
    series:
      title: Region
    size:
      title: CO₂ (tonnes/capita)

country,x,y,size,series
USA,330,21,9.8,Americas
China,1400,14,18.1,Asia
Germany,83,4,1.5,Europe

The size.title option adds a size legend showing the min/max values. Dot sizes scale linearly from min to max within the data range.

Named Columns

Scatter charts detect columns by name (case-insensitive):

If x and y columns aren't found by name, the second and third columns are used.

Or explicitly specify columns:

x:
  column: population
y:
  column: gdp
label:
  column: country
series:
  column: region
size:
  column: area

Proportional Scaling

Use proportional: true to maintain the data's aspect ratio:

proportional: true

This ensures that equal numeric ranges appear as equal visual distances on both axes, useful for geographic or scientific data.

Sankey Charts

Sankey diagrams visualize flows between nodes across multiple levels. The width of each flow represents its value.

charts:
  sankey-demo:
    type: sankey
    title: Website Traffic Flow
    file: charts/sankey-demo.csv

Data Format

Sankey charts require three columns: source, target, and value. The column names can be anything:

from,to,visitors
Search,Homepage,40000
Search,Product,35000
Social,Homepage,15000
Social,Blog,30000
Homepage,Signup,30000
Homepage,Bounce,45000
Product,Purchase,25000

Or explicitly specify columns:

source:
  column: from
target:
  column: to
value:
  column: visitors
  format:
    compact: true

Nodes are automatically arranged into levels based on the flow relationships.

Options

Use proportional: true to ensure node heights are strictly proportional to their values. The chart will grow as tall as needed to keep the smallest node visible, which may significantly increase the chart height when data values vary widely.