# Blog Chart

> Genera gráficos SVG en línea compatibles con modo oscuro para posts: barras horizontales y agrupadas, donut, línea, lollipop, área y radar, con detección de plataforma HTML o JSX/MDX y marcado accesible.

Fuente: https://skillsagentes.com/skills/agricidaniel/claude-blog/blog-chart
Markdown: https://skillsagentes.com/skills/agricidaniel/claude-blog/blog-chart.md

Repositorio: https://github.com/AgriciDaniel/claude-blog
Autor: AgriciDaniel
Licencia: MIT
Actualizado: el mes pasado
Coste de contexto: 117 tok instalada, 2.4k tok al activarse, 9.1k tok con todos los archivos del bundle
Bundle: 2 archivos, 36 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add AgriciDaniel/claude-blog --skill blog-chart --agent claude-code
# Cursor
npx -y skills add AgriciDaniel/claude-blog --skill blog-chart --agent cursor
# Codex
npx -y skills add AgriciDaniel/claude-blog --skill blog-chart --agent codex
# Gemini CLI
npx -y skills add AgriciDaniel/claude-blog --skill blog-chart --agent gemini
# Windsurf
npx -y skills add AgriciDaniel/claude-blog --skill blog-chart --agent windsurf
# Cline
npx -y skills add AgriciDaniel/claude-blog --skill blog-chart --agent cline
```

## Qué hace

- Elige el tipo según la forma del dato: barras agrupadas para antes y después, donut para partes de un todo, línea para tendencias, radar para puntuación multidimensional
- Usa `fill="currentColor"` y fondo transparente para que el gráfico funcione igual sobre fondo claro y oscuro
- Emite `role="img"`, `aria-labelledby`, `<title>` y `<desc>` dentro del SVG y lo envuelve en un `<figure>` con `<figcaption>` y fuente
- Convierte los atributos a camelCase cuando la plataforma es MDX (`strokeWidth`, `textAnchor`, `fontSize`)
- Para los tipos soportados prefiere el CLI determinista `python3 skills/blog-chart/scripts/generate_chart_svg.py`

## Cuándo usarla

- blog-write o blog-rewrite detectan datos que merecen visualizarse
- El usuario dice "blog chart", "generar gráfico" o "visualización de datos"

## Cuándo no

- Como comando independiente: el archivo la declara `user-invokable: false` y la reserva para llamadas internas de blog-write y blog-rewrite

## Qué la activa

- "Visualiza estos datos en un gráfico para el post"

## Antes de instalar

- El CLI determinista para los tipos soportados necesita Python 3.
- Necesita en el PATH: python3

## Archivos

- SKILL.md — 10 KB
- scripts/generate_chart_svg.py — 26 KB

## SKILL.md

Reproducido tal cual desde AgriciDaniel/claude-blog bajo MIT. Esta sección es el documento original y está en inglés.

# 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: "Quarterly Signups by Product"
- Data: Product A 420, Product B 315, Product C 180
- 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"
```

Set `--chart-muted` to an accessible text token in the host theme. If no token
exists, use `#4b5563` on light backgrounds and `#d1d5db` on dark backgrounds.
Do not rely on low-opacity source or subtitle text for visible attribution.

### 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 |

For text inside approved colored elements: use `fill="#111827"` with
`fontWeight="800"`. Only use white text after checking the contrast ratio is
at least 4.5:1 against that specific fill color.

Do not rely on color alone. Add direct labels, patterns, line dashes, marker
shapes, or legend text so colorblind readers can distinguish series.

## Standard SVG Shell (HTML)

```xml
<svg
  viewBox="0 0 560 380"
  style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
  role="img"
  aria-labelledby="chart-title chart-desc"
>
  <title id="chart-title">Chart Title</title>
  <desc id="chart-desc">Description for screen readers with all key data points and source</desc>

  <!-- Chart content -->

  <text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)">
    Source: Source Name (Year)
  </text>
</svg>
```

## JSX/MDX Shell (camelCase attributes)

```jsx
<svg
  viewBox="0 0 560 380"
  style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
  role="img"
  aria-labelledby="chart-title chart-desc"
>
  <title id="chart-title">Chart Title</title>
  <desc id="chart-desc">Description for screen readers</desc>

  {/* Chart content */}

  <text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)">
    Source: Source Name (Year)
  </text>
</svg>
```

## JSX Attribute Conversion (Required for MDX)

| HTML | JSX |
|------|-----|
| `stroke-width` | `strokeWidth` |
| `stroke-dasharray` | `strokeDasharray` |
| `stroke-linecap` | `strokeLinecap` |
| `text-anchor` | `textAnchor` |
| `font-size` | `fontSize` |
| `font-weight` | `fontWeight` |
| `font-family` | `fontFamily` |
| `class` | `className` |
| `style="..."` | `style={{...}}` |

## Chart Type Construction

### Horizontal Bar Chart

Best for: percentage improvements, single-metric comparisons.

1. Define chart area: x=80, y=40, width=440, height=280
2. Calculate bar height: `chartHeight / dataCount - gap` (gap=8)
3. Calculate bar width: `(value / maxValue) * chartWidth`
4. Position bars: `y = chartY + index * (barHeight + gap)`
5. Label on left (right-aligned at x=75): category name
6. Value label at end of bar: percentage or number
7. Source text at bottom center

### Grouped Bar Chart

Best for: before/after, A vs B comparisons.

1. Define groups along Y axis, bars within each group
2. Use 2 colors (primary + secondary) for the two series
3. Add legend at top: colored square + label for each series
4. Gap between groups > gap within groups

### Donut Chart

Best for: parts of whole, market share.

1. Center: cx=280, cy=180, outer radius=140, inner radius=80
2. Calculate arc segments using cumulative angles
3. Each segment: `<path d="M... A... L... A... Z" fill="color" />`
4. Center text: total or key label
5. Legend below chart with color squares + labels + values

### Line Chart

Best for: trends over time.

1. X axis: time periods, evenly spaced
2. Y axis: value range with 4-5 grid lines
3. Draw grid lines: `stroke="currentColor" opacity="0.08"`
4. Plot data points: `<circle cx=... cy=... r="4" fill="color" />`
5. Connect with: `<polyline points="..." fill="none" stroke="color" strokeWidth="2" />`
6. Optional: area fill below line with `opacity="0.1"`

### Lollipop Chart

Best for: ranked factors, correlations.

1. Horizontal orientation (like bar chart but with circles)
2. Thin line from axis to data point: `stroke="currentColor" opacity="0.15" strokeWidth="1"`
3. Circle at data point: `r="6"` with fill color
4. Value label next to circle
5. Categories on Y axis (left-aligned)

### Area Chart

Best for: distribution, cumulative data.

1. Same as line chart but with filled area below
2. Area fill: `<path d="M... L... L... Z" fill="color" opacity="0.15" />`
3. Line on top: `stroke="color" strokeWidth="2" fill="none"`
4. Grid lines behind the area

### Radar Chart

Best for: multi-dimensional scoring (5-7 axes).

1. Center: cx=280, cy=190
2. Draw concentric polygons for grid (3-4 levels)
3. Calculate axis endpoints at equal angles
4. Plot data points on each axis proportional to value
5. Connect data points with filled polygon: `fill="color" opacity="0.2" stroke="color"`
6. Label each axis at the outer edge

## Label Rules

- Wrap long labels at word boundaries into `<tspan>` lines.
- Truncate only when wrapping would collide with data marks, and keep the full
  label in `<desc>` or adjacent prose.
- Use stable chart dimensions with a responsive `max-width: 100%; height: auto`
  style, or choose a justified wider viewBox for dense labels.
- Check mobile widths so axis labels, legends, and value labels do not overlap.

## Output Format

Wrap every chart in a `<figure>` element:

**HTML:**
```html
<figure>
  <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">[Chart Title]</title>
    <desc id="chart-desc">[Full description with data points for screen readers]</desc>
    <!-- chart content -->
    <text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)">
      Source: [Source Name] ([Year])
    </text>
  </svg>
  <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption>
</figure>
```

**MDX:**
```mdx
<figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}>
  <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">[Chart Title]</title>
    <desc id="chart-desc">[Full description]</desc>
    {/* chart content with camelCase attributes */}
    <text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)">
      Source: [Source Name] ([Year])
    </text>
  </svg>
  <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption>
</figure>
```

## Quality Checklist (Verify Before Returning)

- [ ] No hardcoded text colors except contrast-checked labels inside colored elements
- [ ] No white/light backgrounds (transparent or none)
- [ ] Source attribution text present at bottom and semantic `<figcaption>` present
- [ ] `role="img"` and `aria-labelledby` present on `<svg>`
- [ ] `<title id>` and `<desc id>` present inside `<svg>`
- [ ] Chart type choice supports comprehension and comparability
- [ ] If MDX: all attributes camelCased (no hyphens in attribute names)
- [ ] Data values match the source data exactly
- [ ] Color palette uses only approved colors
- [ ] ViewBox is `0 0 560 380` (standard) or justified alternative
- [ ] Labels, shapes, patterns, or line styles provide redundancy beyond color

## Dónde encaja

- Categoría: [Datos y analítica](https://skillsagentes.com/categorias/datos-analitica.md) — Consulta, limpia y visualiza datos sin salir del agente.
- Creador: [AgriciDaniel](https://skillsagentes.com/creators/agricidaniel.md) — 80 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Blog](https://skillsagentes.com/skills/agricidaniel/claude-blog/blog.md): Motor de blog de ciclo completo con 31 subskills, 12 plantillas, puntuación sobre 100 y 5 agentes. Enruta cada petición a la subskill correcta: escribir, reescribir, analizar, auditar, schema, clusters y publicación multilingüe.
- [Blog Google](https://skillsagentes.com/skills/agricidaniel/claude-blog/blog-google.md): Integración con las APIs de Google para rendimiento de blog: PageSpeed Insights, CrUX con 25 semanas de histórico, Search Console, URL Inspection, Indexing API, GA4, NLP de entidades, YouTube y Keyword Planner.
- [Blog Notebooklm](https://skillsagentes.com/skills/agricidaniel/claude-blog/blog-notebooklm.md): Consulta cuadernos de Google NotebookLM para obtener respuestas ancladas en tus propios documentos y con citas: gestiona la biblioteca de cuadernos, la autenticación con Google y el descubrimiento de contenido.
- [Blog Audio](https://skillsagentes.com/skills/agricidaniel/claude-blog/blog-audio.md): Genera narración en audio de posts con Google Gemini TTS: resumen hablado, lectura completa o diálogo tipo pódcast a dos voces, con 30 voces y salida MP3 más el código de inserción HTML5.
- [Blog Image](https://skillsagentes.com/skills/agricidaniel/claude-blog/blog-image.md): Generación y edición de imágenes con IA para contenido de blog mediante Gemini por MCP: portadas, ilustraciones, tarjetas sociales y OG, con 6 modos de dominio y retorno silencioso si el MCP no está disponible.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)