Chart Types

All available chart types with examples

Overview

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

Type Description Negative Values
donut Pie/donut chart using conic-gradient No
stacked-bar Horizontal bars with stacked segments No
stacked-column Vertical columns with stacked segments Yes
dot Categorical dot chart with Y-axis positioning Yes
scatter XY scatter plot with continuous axes Yes (X and Y)

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
Browser Market Share
  • Chrome65.0%
  • Safari18.0%
  • Firefox10.0%
  • Edge7.0%

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
Team Growth
  • Existing
  • New Hires
Finance
22
Sales
18
Core
8
Marketing
10
Engineering
22
↓ Download data

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
Release Cadence
  • Production
  • Hotfix
  • Beta
1680
Q1Q2Q3Q4
↓ Download data

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
Monthly Temperatures
  • High
  • Low
280-2
JanFebMarAprMayJun
↓ Download data

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)
Population vs GDP
  • Americas
  • Asia
  • Europe
21110GDP (trillions)
07001400Population (millions)
↓ Download data

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