← ClaudeAtlas

chart-config-generatorlisted

Map raw JSON datasets into ready-to-use chart configuration objects (Chart.js, Recharts, or ECharts).
RMAzrim/opencode-artes · ★ 2 · AI & Automation · score 76
Install: claude install-skill RMAzrim/opencode-artes
# Chart Config Generator ## Prerequisites & Dependencies - Node.js 18+ or Python 3.10+ - Mandatory packages (choose one): - JavaScript: `npm i chart.js` - Python: `pip install matplotlib seaborn plotly` - A raw JSON dataset with numeric values and categorical labels ## Execution Steps 1. Load or define the raw JSON dataset: an array of objects with at least one numeric `value` field and one categorical `label`/`category` field 2. Determine the chart type based on the data shape: - Bar chart: compare categories - Line chart: show trends over time - Pie/Doughnut: show part-to-whole ratios 3. Map dataset fields to chart configuration: - X-axis: categorical label field - Y-axis: numeric value field - Tooltip/custom label: additional fields as needed 4. Generate the chart configuration object: - **Chart.js**: `{ type: 'bar', data: { labels: [...], datasets: [{ label: '...', data: [...] }] }, options: { ... } }` - **Recharts**: `<BarChart data={...}><Bar dataKey="value" name="..." /></BarChart>` - **ECharts**: `option: { xAxis: { data: [...] }, yAxis: { type: 'value' }, series: [{ name: '...', type: 'bar', data: [...] }] }` 5. Customize colors, legends, and responsive settings per the chosen library's API 6. Render the chart in your frontend or export as image/PDF using library-specific methods ```javascript // Example: Chart.js configuration from raw JSON const rawData = [ { category: 'January', value: 65 }, { category: 'February', value: 59