Loading...
Loading...
Create production-quality data visualizations including charts, dashboards, and infographics. Use when the user asks to visualize data, create charts, build dashboards, make infographics, plot statistics, or transform datasets into visual representations. Supports React/Recharts artifacts, static images (PNG/PDF via Python), and interactive HTML. Triggers include "visualize this data", "create a chart", "build a dashboard", "make a graph", "plot this", "infographic", or any request to represent data visually.
npx skill4agent add dodatech/approved-skills data-visualization| Format | Best For | Implementation |
|---|---|---|
| React Artifact | Interactive dashboards, real-time exploration, web delivery | Recharts + Tailwind |
| HTML Artifact | Standalone interactive charts, shareable files | Chart.js or D3 |
| Python → PNG/PDF | Print-ready graphics, reports, presentations | Matplotlib/Seaborn |
| Python → Interactive | Notebooks, exploratory analysis | Plotly |
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
const data = [
{ month: 'Jan', value: 400 },
{ month: 'Feb', value: 300 },
];
export default function Chart() {
return (
<ResponsiveContainer width="100%" height={400}>
<LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
<XAxis dataKey="month" tick={{ fill: '#666' }} />
<YAxis tick={{ fill: '#666' }} />
<Tooltip />
<Line type="monotone" dataKey="value" stroke="#2563eb" strokeWidth={2} dot={false} />
</LineChart>
</ResponsiveContainer>
);
}import matplotlib.pyplot as plt
plt.style.use('seaborn-v0_8-whitegrid')
fig, ax = plt.subplots(figsize=(10, 6), dpi=150)
ax.plot(x, y, color='#2563eb', linewidth=2)
ax.set_title('Title', fontsize=14, fontweight='600', pad=20)
ax.set_xlabel('X Label', fontsize=11)
ax.set_ylabel('Y Label', fontsize=11)
ax.spines['top'].set_visible(False)
ax.spines['right'].set_visible(False)
plt.tight_layout()
plt.savefig('chart.png', bbox_inches='tight', facecolor='white')<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{ data: [10, 20, 30], backgroundColor: '#2563eb' }]
},
options: { responsive: true, plugins: { legend: { display: false } } }
});
</script>references/