| name | blog-chart |
| 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-label), 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).
|
| user-invokable | false |
| id | blog-chart |
| domain | content |
| invoked_by | ["blog-seo"] |
| depends_on | [] |
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: references/visual-media.md
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: Ahrefs, December 2025
- Platform: mdx (or html)
Chart Type Selection
Select based on the data pattern. Diversity is mandatory - never repeat a
type within one post.
| 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="currentColor" opacity="0.45"
Source text: fill="currentColor" opacity="0.35"
Label text: fill="currentColor" opacity="0.8"
Color Palette
| Color | Hex | Use Case |
|---|
| Orange | #f97316 | Primary / highest value |
| Sky Blue | #38bdf8 | Secondary / comparison |
| Purple | #a78bfa | Tertiary / special category |
| Green | #22c55e | Quaternary / positive indicator |
