HOME SKILLS BLOG GITHUB
// SKILL

BLOG CHART
DATA THAT RENDERS ITSELF

When a post has chart-worthy data, Claude Blog draws it. /blog chart generates dark-mode-compatible inline SVG, seven chart types selected by the shape of your data, with accessible markup and source attribution baked in. No charting library, no external request. It runs automatically inside the writing pipeline. Free with Claude Blog.

$
/blog chart

REQUIRES CLAUDE BLOG INSTALLED IN CLAUDE CODE

// HOW IT WORKS

INLINE SVG. NO LIBRARY.

blog-chart is built into the writing pipeline. blog-write and blog-rewrite invoke it automatically whenever they identify chart-worthy data: three or more comparable metrics, a trend over time, or before/after numbers. You do not call it by hand. The chart appears in context as the post is built.

Output is plain inline SVG. No charting library loads, no external request fires, so the page stays light and passes strict content security policies. Backgrounds are transparent, so the chart inherits the page theme and stays dark-mode-compatible without a second render. The platform is detected automatically, raw HTML or JSX/MDX, and the markup is shaped to match.

7
CHART TYPES
Horizontal bar, grouped bar, donut, line, lollipop, area, and radar. The type is chosen by the shape of the data, and never repeated within a single post.
☽
DARK-MODE NATIVE
Transparent backgrounds mean the chart inherits the page theme. No second light/dark render, no mismatched panel behind your data.
A
ACCESSIBLE SVG
Every chart carries role=img and a descriptive aria-label, plus visible source attribution under the figure. Readable by screen readers and by AI crawlers.
</>
AUTO PLATFORM
Detects HTML versus JSX/MDX and emits markup that drops straight in. The same chart request works across static sites and framework blogs.
// CHART SELECTION

THE RIGHT TYPE FOR THE DATA

Chart type is not a style choice; it follows the data pattern. blog-chart maps each pattern to the type that reads cleanest, and enforces diversity so no single post leans on one shape.

Data PatternChart Type
Before / after comparisonGrouped bar
Ranked factors or correlationsLollipop
Parts of a whole / market shareDonut
Trend over timeLine
Percentage improvementHorizontal bar
Distribution / rangeArea
Multi-dimensional scoringRadar

Chart Request Format

Internally, the writer or researcher passes a structured request that blog-chart turns into SVG:

Chart Request:
- Type: horizontal bar
- Title: "AI Citation Sources by Platform"
- Data: ChatGPT 43.8%, Perplexity 6.6%, ...
- Source: Ahrefs, December 2025
- Platform: mdx (or html)

Non-Negotiable Styling

  • Transparent background so the chart works on any theme.
  • Type diversity enforced; a chart type is never repeated inside one post.
  • Source attribution rendered with every chart so the data is verifiable.
  • Accessible markup with role=img and aria-label on every figure.
// FAQ

QUESTIONS ABOUT BLOG CHART

It generates dark-mode-compatible inline SVG charts for blog posts. It supports seven chart types (horizontal bar, grouped bar, donut, line, lollipop, area, and radar), detects the target platform automatically (raw HTML versus JSX/MDX), and emits accessible markup with role=img and aria-label, source attribution, and transparent backgrounds that work on any theme.
It runs primarily inside the writing pipeline. blog-write and blog-rewrite invoke it automatically whenever they identify chart-worthy data, such as three or more comparable metrics, a trend over time, or before/after numbers. You do not need to call it manually; it produces the right visualization in context as the post is built.
Seven: horizontal bar (percentage improvements), grouped bar (before/after comparisons), donut (parts of a whole or market share), line (trends over time), lollipop (ranked factors or correlations), area (distributions or ranges), and radar (multi-dimensional scoring). Chart type is selected by the shape of the data, and diversity is enforced so a type is never repeated within a single post.
Yes. Every chart ships with accessible SVG markup including role=img and a descriptive aria-label, plus visible source attribution. Backgrounds are transparent so the chart inherits the page theme, which keeps it dark-mode-compatible without a second render.
No. Charts are emitted as plain inline SVG with no JavaScript charting library and no external request. They render anywhere the post does (static HTML, MDX, or a framework), keep the page lightweight, and pass strict content security policies.
// RELATED SKILLS

EXPLORE MORE

BLOG WRITER

Drafts full articles and calls blog-chart automatically when the draft contains chart-worthy data points.

CONTENT WRITER →

CONTENT REWRITER

Optimizes existing posts and adds inline SVG charts where comparable metrics or trends appear in the source.

CONTENT OPTIMIZER →

SCHEMA MARKUP

Generates JSON-LD structured data. Pairs with charts to make data both human-readable and machine-parseable.

SCHEMA GENERATOR →

VIEW ALL 30 SKILLS →

TURN YOUR DATA
INTO CLEAN SVG.

$
git clone --depth 1 https://github.com/AgriciDaniel/claude-blog.git && bash claude-blog/install.sh
VIEW ON GITHUB ALL SKILLS >