| name | 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 when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", "圖表", "資料視覺化".
|
| user-invokable | false |
Blog Chart -- Built-In SVG Data Visualization
Generates dark-mode-compatible inline SVG charts for blog posts. Invoked
internally by write and rewrite when chart-worthy data is identified.
Styling source of truth: references/visual-media.md
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 |
Standard SVG Shell (HTML)
<svg
viewBox="0 0 560 380"
style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
role="img"
aria-label="Chart description with key data point"
>
<title>Chart Title</title>
<desc>Description for screen readers with all key data points and source</desc>
<text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
Source: Source Name (Year)
</text>
</svg>
JSX/MDX Shell (camelCase attributes)
<svg
viewBox="0 0 560 380"
style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
role="img"
aria-label="Chart description"
>
<title>Chart Title</title>
<desc>Description for screen readers</desc>
<text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
Source: Source Name (Year)
</text>
</svg>
JSX Attribute Conversion (Required for MDX)
| HTML | JSX |
|---|
stroke-width | strokeWidth |
text-anchor | textAnchor |
font-size | fontSize |
font-weight | fontWeight |
class | className |
style="..." | style={{...}} |
Output Format
Wrap every chart in a <figure> element:
HTML:
<figure>
<svg viewBox="0 0 560 380" style="max-width: 100%; height: auto;" role="img" aria-label="[description]">
<title>[Chart Title]</title>
<desc>[Full description for screen readers]</desc>
<text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
Source: [Source Name] ([Year])
</text>
</svg>
</figure>
Quality Checklist (Verify Before Returning)
