TileDown
Article

Interactive Charts

When a chart needs richer hover behavior, TileDown renders it as an interactive tile that ships a small script for a styled, cursor-following tooltip.

Charts in Markdown are static SVG with zero shipped JavaScript, which is the right default. But sometimes you want a richer hover: a styled tooltip that follows the cursor and reads on touch and keyboard. TileDown offers the same chart as an interactive tile, which opts into a small page-local script. Static by default; interactivity is a deliberate choice.

Hover the bars below (or focus them with the keyboard):

Developer happiness, now interactive
bar chart with 4 labels and 1 series 0 20 40 60 80 100 TileDown: 92 Hugo: 71 Jekyll: 64 Bespoke PHP: 12 TileDown Hugo Jekyll Bespoke PHP Happy devs

The data is the same fabricated benchmark from the static article; the difference is the cursor-following tooltip. The script is scoped to interactive charts: a page with only static fences ships none.

Same opt-in, with two series:

Weekend rewrites, interactive
line chart with 5 labels and 2 series 0 1 2 3 4 Before, Jan: 4 Before, Feb: 3 Before, Mar: 4 Before, Apr: 2 Before, May: 3 After, Jan: 3 After, Feb: 1 After, Mar: 1 After, Apr: 0 After, May: 0 Jan Feb Mar Apr May Before After

This is the tile half of TileDown’s split: static SVG is a Markdown capability; the interactive chart is a tile, because interactivity is what a tile is for.

View Markdown source
index.md
---
title: Interactive Charts
date: 2026-06-03
description: When a chart needs richer hover behavior, TileDown renders it as an interactive tile that ships a small script for a styled, cursor-following tooltip.
tags: Charts, Interactive, JavaScript
image: /assets/post-interactive-charts.svg
imageDark: /assets/post-interactive-charts-dark.svg
---
# Interactive Charts

[Charts in Markdown](post:charts-in-markdown) are static SVG with zero shipped
JavaScript, which is the right default. But sometimes you want a richer hover: a
styled tooltip that follows the cursor and reads on touch and keyboard. TileDown
offers the same chart as an **interactive tile**, which opts into a small
page-local script. Static by default; interactivity is a deliberate choice.

Hover the bars below (or focus them with the keyboard):

:::chart
type: bar
title: Developer happiness, now interactive
labels: TileDown, Hugo, Jekyll, Bespoke PHP
series.Happy devs: 92, 71, 64, 12
:::

The data is the same fabricated benchmark from the static article; the difference
is the cursor-following tooltip. The script is scoped to interactive charts: a
page with only static fences ships none.

Same opt-in, with two series:

:::chart
type: line
title: Weekend rewrites, interactive
labels: Jan, Feb, Mar, Apr, May
series.Before: 4, 3, 4, 2, 3
series.After: 3, 1, 1, 0, 0
:::

This is the tile half of TileDown's split: static SVG is a Markdown capability;
the interactive chart is a tile, because interactivity is what a tile is for.