# Blog Chart

Generate dark-mode-compatible inline SVG data visualization charts for blog posts.

- Repository: https://github.com/AgriciDaniel/claude-blog (2608 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add AgriciDaniel/claude-blog --skill blog-chart -g -a claude-code -y`
Codex: `npx skills add AgriciDaniel/claude-blog --skill blog-chart -g -a codex -y`
Cursor: `npx skills add AgriciDaniel/claude-blog --skill blog-chart -g -a cursor -y`
Gemini CLI: `npx skills add AgriciDaniel/claude-blog --skill blog-chart -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add AgriciDaniel/claude-blog`

## Description

Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Blog Chart: Built-In SVG Data Visualization

Generates dark-mode-compatible inline SVG charts for blog posts. Invoked
internally by `blog-write` and `blog-rewrite` when chart-worthy data is
identified. Not a standalone user-facing command.

**Styling source of truth:** `skills/blog/references/visual-media.md`

For supported chart types, prefer the deterministic CLI:

```bash
python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json
```

## Input Format

The writer or researcher passes a chart request:

```
Chart Request:
- Type: horizontal bar
- Title: "AI Citation Sources by Platform"
- Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15%
- Source: [Verified source], [publication date]
- Platform: mdx (or html)
```

## Chart Type Selection

Select based on the data pattern. Prefer chart type diversity, but repeat a
type when comparability or reader comprehension clearly benefits.

| Data Pattern | Best Chart Type |
|-------------|-----------------|
| Before/after comparison | Grouped bar chart |
| Ranked factors / correlations | Lollipop chart |
| Parts of whole / market share | Donut chart |
| Trend over time | Line chart |
| Percentage improvement | Horizontal bar chart |
| Distribution / range | Area chart |
| Multi-dimensional scoring | Radar chart |

## Styling Rules (Non-Negotiable)

All charts must work on both dark and light backgrounds:

```
Text elements:     fill="currentColor"
Grid lines:        stroke="currentColor" opacity="0.08"
Axis lines:        stroke="currentColor" opacity="0.3"
Background:        transparent (no fill on root SVG)
Subtitle text:     fill="var(--chart-muted, currentColor)"
Source text:        fill="var(--chart-muted, currentColor)"
Label text:        fill="currentColor" opacity="0.8"
```

The rest: https://github.com/AgriciDaniel/claude-blog/blob/HEAD/brain/.raw/sources/claude-blog-skill/skills/blog-chart/SKILL.md