chart

Original：🇺🇸 English
Translated

Generate minimal, clean charts using QuickChart.io with shadcn-style grayscale design. Supports bar, line, area, pie, and more. No dependencies required.

5installs
Sourcepvergaraf/chart-skill
Added on

NPX Install

npx skill4agent add pvergaraf/chart-skill chart

Tags

Translated version includes tags in frontmatter
quickchart-iochart-generationgrayscale-designdata-visualizationcurl-script

SKILL.md Content

View Translation Comparison →

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

TypeKeywordsDescription
Bar (vertical)
bar
, 
bar chart
Vertical bars
Bar (horizontal)
horizontal bar
, 
hbar
Horizontal bars
Line
line
, 
line chart
Time series, trends
Area
area
, 
area chart
Filled line chart
Pie
pie
, 
pie chart
Proportions
Doughnut
doughnut
, 
donut
Ring-style proportions

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)

ColorHexUsage
zinc-900
#18181B
Primary series
zinc-700
#3F3F46
Secondary series
zinc-500
#71717A
Third series
zinc-400
#A1A1AA
Fourth series
zinc-300
#D4D4D8
Fifth series
zinc-200
#E4E4E7
Sixth series
zinc-100
#F4F4F5
Grid lines

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:
json
{
  "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 } }
      }
    }
  }
}
  1. Generate the chart using POST to QuickChart.io:
bash
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
  1. Show the result by reading the generated image file with the Read tool

Chart Type Configurations

Bar Chart

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

Horizontal Bar Chart

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

Line Chart

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

Area Chart (Filled Line)

json
{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{
      "data": [10, 20, 30],
      "borderColor": "#18181B",
      "backgroundColor": "rgba(24, 24, 27, 0.1)",
      "borderWidth": 2,
      "tension": 0.3,
      "pointRadius": 0,
      "fill": true
    }]
  }
}

Multi-Series Area Chart

json
{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr"],
    "datasets": [
      {
        "label": "Desktop",
        "data": [100, 150, 120, 180],
        "borderColor": "#18181B",
        "backgroundColor": "rgba(24, 24, 27, 0.15)",
        "borderWidth": 2,
        "tension": 0.3,
        "fill": true
      },
      {
        "label": "Mobile",
        "data": [80, 120, 140, 160],
        "borderColor": "#71717A",
        "backgroundColor": "rgba(113, 113, 122, 0.15)",
        "borderWidth": 2,
        "tension": 0.3,
        "fill": true
      }
    ]
  },
  "options": {
    "plugins": {
      "legend": { "display": true, "position": "bottom", "labels": { "color": "#71717A", "usePointStyle": true } }
    }
  }
}

Pie / Doughnut Chart

json
{
  "type": "doughnut",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [45, 30, 25],
      "backgroundColor": ["#18181B", "#71717A", "#D4D4D8"],
      "borderWidth": 0
    }]
  },
  "options": {
    "cutout": "60%"
  }
}

Examples

Bar Chart

/chart compare our Q4 numbers - Revenue hit 450, Costs were 320, and Profit came in at 130
Generated curl:
bash
curl -X POST https://quickchart.io/chart \
  -H 'Content-Type: application/json' \
  -d '{
    "version": "4",
    "backgroundColor": "white",
    "width": 600,
    "height": 400,
    "chart": {
      "type": "bar",
      "data": {
        "labels": ["Revenue", "Costs", "Profit"],
        "datasets": [{"data": [450, 320, 130], "backgroundColor": "#18181B", "borderRadius": 4}]
      },
      "options": {
        "layout": {"padding": {"top": 20, "right": 30, "bottom": 20, "left": 20}},
        "plugins": {
          "title": {"display": true, "text": "Q4 Financial Summary", "align": "start", "font": {"size": 16, "weight": "600"}, "color": "#18181B", "padding": {"bottom": 20}},
          "legend": {"display": false}
        },
        "scales": {
          "y": {"beginAtZero": true, "border": {"display": false}, "grid": {"color": "#F4F4F5"}, "ticks": {"color": "#71717A", "padding": 10}},
          "x": {"border": {"display": false}, "grid": {"display": false}, "ticks": {"color": "#71717A", "padding": 10}}
        }
      }
    }
  }' \
  --output ~/Downloads/chart_$(date +%Y%m%d_%H%M%S).png

Area Chart

/chart show monthly visitors as an area chart - Jan had 186, Feb 305, Mar 237, Apr 73, May 209, Jun 214

Multi-Series Comparison

/chart compare desktop vs mobile traffic:
Desktop: Jan 100, Feb 150, Mar 120
Mobile: Jan 80, Feb 120, Mar 140

From Data

/chart visualize this CSV as a line chart:
date,users
2024-01-01,150
2024-01-02,180
2024-01-03,220

Output

Charts are saved to 
~/Downloads/chart_YYYYMMDD_HHMMSS.png
by default (with timestamp). Use the Read tool to display the generated image to the user.

No Dependencies

This skill uses QuickChart.io's free API - no local packages required. Just curl.