Chart Types

Overview

Uncharted supports seven 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
    legend:
      - Existing
      - 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
    legend:
      - Production
      - Hotfix
      - Beta

Rotated Labels

For long category labels, use rotateLabels: true:

rotateLabels: true

Dot Charts

Categorical dot charts position points along a Y-axis. Supports negative values.

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

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 Dots

Use dots: false to show only the connecting lines:

dots: false

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
    titleX: Population (millions)
    titleY: GDP (trillions)

Axis Titles

By default, axis titles come from CSV column names. Override with explicit titles:

titleX: "Population (millions)"
titleY: "GDP (trillions)"

Series Grouping

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

country,population,gdp,region
USA,330,21,Americas
China,1400,14,Asia
Germany,83,4,Europe

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 in order: 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

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.