Chart Generation Skill

Generate clean, minimal charts with shadcn-inspired grayscale styling using QuickChart.io (no dependencies needed).

Quick Usage

Users can describe charts naturally:

/chart show me monthly revenue: Jan $12k, Feb $15k, Mar $18k, Apr $14k

/chart compare Q4 performance - Revenue was 450, Costs 320, Profit 130

/chart visualize team breakdown: Engineering 45%, Product 25%, Design 20%, Operations 10%

/chart create an area chart of daily active users over the past week

/chart horizontal bar ranking: Chile 89, Mexico 76, Peru 65, Colombia 58

/chart plot this data as a line chart [paste CSV or JSON]

Data Input Formats

Inline (Simple)

Label1 Value1, Label2 Value2, Label3 Value3

From file

/chart line chart from /path/to/data.csv

Chart Types

Options

• title: title "My Chart Title"
• output: save to /path/to/chart.png (default: ~/Downloads/chart_YYYYMMDD_HHMMSS.png)
• size: size 800x600 (width x height in pixels, default: 600x400)

Color Palette (Grayscale - shadcn/Zinc)

Style Elements

• Clean, minimal design
• Grayscale color palette
• Subtle grid lines (zinc-100)
• Rounded corners on bars (radius: 4)
• Smooth curves on lines (tension: 0.3)
• No borders, light aesthetic
• Semi-transparent fills for area charts

Instructions

When the user requests a chart:

1. Parse the request to identify:

   • Chart type (bar, line, area, pie, doughnut, horizontal bar)
   • Data (inline or file path)
   • Title (if provided)
   • Output path (default: ~/Downloads/chart_$(date +%Y%m%d_%H%M%S).png)
   • Size (default: 600x400)

2. Build the Chart.js configuration using this shadcn-style template:

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": "#18181B",
      "borderRadius": 4
    }]
  },
  "options": {
    "layout": {
      "padding": { "top": 20, "right": 30, "bottom": 20, "left": 20 }
    },
    "plugins": {
      "title": {
        "display": true,
        "text": "Chart Title",
        "align": "start",
        "font": { "size": 16, "weight": "600", "family": "Inter, system-ui, sans-serif" },
        "color": "#18181B",
        "padding": { "bottom": 20 }
      },
      "legend": { "display": false },
      "datalabels": { "display": false }
    },
    "scales": {
      "y": {
        "beginAtZero": true,
        "border": { "display": false },
        "grid": { "color": "#F4F4F5" },
        "ticks": { "color": "#71717A", "padding": 10, "font": { "size": 11 } }
      },
      "x": {
        "border": { "display": false },
        "grid": { "display": false },
        "ticks": { "color": "#71717A", "padding": 10, "font": { "size": 11 } }
      }
    }
  }
}

3. Generate the chart using POST to QuickChart.io:

curl -X POST https://quickchart.io/chart \
  -H 'Content-Type: application/json' \
  -d '{
    "version": "4",
    "backgroundColor": "white",
    "width": 600,
    "height": 400,
    "chart": CHART_CONFIG_JSON
  }' \
  --output ~/Downloads/chart_$(date +%Y%m%d_%H%M%S).png

4. Show the result by reading the generated image file with the Read tool

Chart Type Configurations

Bar Chart

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": "#18181B",
      "borderRadius": 4
    }]
  }
}

Horizontal Bar Chart

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": "#18181B",
      "borderRadius": 4
    }]
  },
  "options": {
    "indexAxis": "y"
  }
}

Line Chart

{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{
      "data": [10, 20, 30],
      "borderColor": "#18181B",
      "borderWidth": 2,
      "tension": 0.3,
      "pointRadius": 0,
      "fill": false
    }]