Designs charts and data visualizations: selects optimal type based on data, applies accessible palettes and annotations, outputs production-ready HTML/CSS/JS with Chart.js or alternatives.
From design-studionpx claudepluginhub rp4ri/claude-local-marketplace --plugin design-studio/chart-designDesigns charts and data visualizations: selects optimal type based on data, applies accessible palettes and annotations, outputs production-ready HTML/CSS/JS with Chart.js or alternatives.
Design a data visualization: select the right chart type, apply accessible colors, add meaningful annotations, and produce production-ready HTML/CSS/JS with Chart.js (or vanilla SVG for simple charts).
Usage: /chart-design <description>
Examples:
/chart-design monthly revenue trend for 2025/chart-design part-to-whole breakdown of user acquisition channels/chart-design scatter plot: ad spend vs conversion rate/chart-design --library d3 geographic distribution by US stateExtract from $ARGUMENTS:
--library chart.js (default) | d3 | recharts | vanilla--a11y flag or always default to accessible palette)--style dark for dark backgrounds, --style minimal for clean axesApply the chart type selection matrix from the Data Viz Designer reference:
| Data relationship → | Recommended chart |
|---|---|
| Trend over time (continuous) | Line chart |
| Trend over time (discrete periods) | Vertical bar chart |
| Part-to-whole (≤ 5 categories) | Donut chart |
| Part-to-whole (many categories) | Stacked bar |
| Comparison across categories | Grouped bar chart |
| Single metric vs target | Bullet chart |
| Distribution of one variable | Histogram |
| Correlation between 2 variables | Scatter plot |
| Ranking with long labels | Horizontal bar |
| Hierarchical proportions | Treemap |
| Flow between stages | Sankey diagram |
Reject anti-patterns: If the request implies a 3D chart, dual Y-axis, or pie with > 5 slices, note the issue and recommend the appropriate alternative.
Apply palette based on the data type:
Sequential (single variable, ordered values):
--data-seq-1: #dbeafe; --data-seq-2: #93c5fd;
--data-seq-3: #3b82f6; --data-seq-4: #1d4ed8; --data-seq-5: #1e3a8a;
Diverging (values diverge from a midpoint — profit/loss, sentiment):
--data-div-neg-2: #dc2626; --data-div-neg-1: #fca5a5;
--data-div-mid: #f3f4f6;
--data-div-pos-1: #93c5fd; --data-div-pos-2: #1d4ed8;
Categorical (distinct series — up to 8, colorblind-safe):
--data-cat-1: #2563eb; --data-cat-2: #16a34a; --data-cat-3: #dc2626;
--data-cat-4: #d97706; --data-cat-5: #7c3aed; --data-cat-6: #0891b2;
--data-cat-7: #db2777; --data-cat-8: #4b5563;
Identify the key insight and add at least one annotation:
HTML/CSS/JS output requirements:
--library specifiedresponsive: true, maintainAspectRatio: false — chart fills its containerwidth: 100%; height: 300px on <canvas> wrapper (override with --height flag)role="img" + <title> + <desc> elementsaria-labelledby pointing to <figcaption> + <details> data table fallbackchartjs-plugin-annotationOutput structure:
<figure class="chart-figure">
<figcaption id="chart-title">[Chart title]</figcaption>
<div class="chart-wrapper">
<canvas id="chart" aria-labelledby="chart-title"></canvas>
</div>
<details class="chart-data-table">
<summary>View data table</summary>
<table>...</table>
</details>
</figure>
CSS (self-contained):
.chart-figure { margin: 0; }
.chart-wrapper { position: relative; width: 100%; height: 300px; }
figcaption {
font-size: 14px; font-weight: 600;
color: #111827; margin-bottom: 12px;
}
.chart-data-table { margin-top: 12px; font-size: 13px; }
Before outputting:
This command does not require MCP. All output is self-contained HTML/CSS/JS using Chart.js or vanilla SVG.
/dashboard-layout — Place the chart in a full dashboard with KPI cards and filters/design-review — Audit the chart output for accessibility and visual quality/design-framework — Convert the HTML chart to a React/Vue/Svelte component