chartletv0.1.0-alpha.3

CASOON Open Source

Accessible charts, compiled at build time.

chartlet turns a small JSON specification into plain SVG or an HTML figure with caption, source and data table. No chart JavaScript, no hydration, no layout shift – and the same bytes on every build.

cargo install chartlet --version 0.1.0-alpha.3
npm install @casoon/chartlet@alpha
MITalphacrates.io 0.1.0-alpha.3npm 0.1.0-alpha.3Rust 1.88+
Budget and actual costsBar chart with 4 categories and 2 series (Budget, Actual). Highest: 160 (Budget in April). Lowest: 120 (Budget in January). 1 value is missing.Budget and actual costs050100150200Costs in thousandsBudgetActualJanuary – Budget: 120120January – Actual: 130130JanuaryFebruary – Budget: 150150February – Actual: 145145FebruaryMarch – Budget: 140140March – Actual: 152152MarchApril – Budget: 160160AprilMonth
bytes of chart JavaScript in the browser
0
example charts, also the golden-file test inputs
10
minimum contrast of every series colour on white
4.5:1
series per chart, up to 100 categories
4

What it does

  1. Accessible by default

    Every chart carries a title and a description generated from the data, and the HTML output always includes the complete data as a table.

  2. Deterministic

    The same specification produces the same bytes, so charts can be reviewed, diffed and cached like any other build artifact.

  3. Honest about problems

    Invalid input is rejected with a code, a path and a fix. Shortened labels and omitted value labels are reported as warnings instead of happening silently.

  4. Interaction without JavaScript

    Series filters and pre-rendered zoom steps use native controls and CSS; every mark has a native tooltip.

Generated at build time

All examples →
Monthly active users
Monthly active usersUsage grew through May. April has no reported value and is shown as a gap.Monthly active users1000120014001600180020002200Active usersJanuary: 12001200JanuaryFebruary: 14601460FebruaryMarch: 13901390MarchAprilMay: 18101810MayJune: 20502050JuneMonth

Source: Example data

Show chart data
Data for Monthly active users
CategoryValue
January1200
February1460
March1390
AprilMissing
May1810
June2050

Every chart on this site is rendered by chartlet during the build, from the same specifications the test suite uses.

examples/monthly-trend.json

Quickstart

From a specification to a finished chart. The full walkthrough lives in the documentation.

  1. Install the CLI, or the Astro package together with the CLI.
  2. Describe the chart in a small JSON specification.
  3. Render it with chartlet render or the <Chart> component.
Read the documentation
spec.jsonSpecification
{
  "schemaVersion": 1,
  "type": "bar",
  "title": "Monthly revenue",
  "data": [
    { "label": "January", "value": 120 },
    { "label": "February", "value": 180 },
    { "label": "March", "value": 150 }
  ]
}
CLI
chartlet render spec.json --format html -o chart.html
index.astroAstro
---
import Chart from '@casoon/chartlet/astro';
import revenue from '../data/monthly-revenue.json';
---

<Chart id="monthly-revenue" spec={revenue} />