Claude-skill-registry chartjs-chart-types

This skill should be used when the user asks "how to create a line chart", "Chart.js bar chart", "pie chart Chart.js", "doughnut chart", "radar chart", "polar area chart", "bubble chart", "scatter chart", "mixed chart", "combo chart", "area chart", "stacked chart", "horizontal bar chart", "Chart.js chart types", "dataset properties", "chart data structure", or needs help implementing specific Chart.js v4.5.1 chart types.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/chartjs-chart-types" ~/.claude/skills/majiayu000-claude-skill-registry-chartjs-chart-types && rm -rf "$T"

manifest: skills/data/chartjs-chart-types/SKILL.md

Chart.js Chart Types (v4.5.1)

Complete guide to all Chart.js chart types, their configuration, and dataset properties.

Available Chart Types

Type	Description	Use Case
`line`	Line chart	Trends over time
`bar`	Bar chart	Comparing categories
`pie`	Pie chart	Parts of a whole
`doughnut`	Doughnut chart	Parts of a whole with center
`radar`	Radar/spider chart	Multivariate data comparison
`polarArea`	Polar area chart	Cyclical data
`bubble`	Bubble chart	Three dimensions
`scatter`	Scatter plot	Correlation analysis

Line Chart

Show trends and changes over time:

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'Sales',
      data: [65, 59, 80, 81, 56],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1  // 0 = straight lines, 0.4 = curved
    }]
  }
});

Key Line Properties

Property	Type	Description
`tension`	number	Bezier curve tension (0-1)
`fill`	boolean/string	Fill area under line
`stepped`	boolean/string	Stepped line interpolation
`borderDash`	number[]	Dashed line pattern
`pointRadius`	number	Data point size
`pointStyle`	string	Point shape (circle, rect, triangle, etc.)
`spanGaps`	boolean	Connect over null values

Vertical Line Chart

Flip axes with

indexAxis

options: {
  indexAxis: 'y'  // Vertical line chart
}

Bar Chart

Compare discrete categories:

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green'],
    datasets: [{
      label: 'Votes',
      data: [12, 19, 3, 5],
      backgroundColor: [
        'rgba(255, 99, 132, 0.5)',
        'rgba(54, 162, 235, 0.5)',
        'rgba(255, 206, 86, 0.5)',
        'rgba(75, 192, 192, 0.5)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: { beginAtZero: true }
    }
  }
});

Key Bar Properties

Property	Type	Description
`barThickness`	number/'flex'	Bar width in pixels
`barPercentage`	number	Bar width relative to category (0-1)
`categoryPercentage`	number	Category width (0-1)
`borderRadius`	number/object	Rounded corners
`borderSkipped`	string	Which border to skip

Horizontal Bar Chart

options: {
  indexAxis: 'y'  // Makes bars horizontal
}

Stacked Bar Chart

options: {
  scales: {
    x: { stacked: true },
    y: { stacked: true }
  }
}

Pie & Doughnut Charts

Show proportional data:

// Pie chart
new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: ['#ff6384', '#36a2eb', '#ffce56']
    }]
  }
});

// Doughnut chart
new Chart(ctx, {
  type: 'doughnut',
  data: { /* same as pie */ },
  options: {
    cutout: '50%'  // Size of center hole
  }
});

Key Pie/Doughnut Properties

Property	Type	Description
`cutout`	number/string	Center hole size (doughnut)
`rotation`	number	Starting angle (degrees)
`circumference`	number	Arc sweep (degrees)
`offset`	number	Arc offset on hover
`hoverOffset`	number	Offset when hovering

Semi-Circle Chart

options: {
  rotation: -90,
  circumference: 180
}

Radar Chart

Compare multiple variables across categories:

new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['Speed', 'Power', 'Defense', 'Stamina', 'Agility'],
    datasets: [{
      label: 'Player A',
      data: [65, 59, 90, 81, 56],
      fill: true,
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',
      pointBackgroundColor: 'rgb(255, 99, 132)'
    }, {
      label: 'Player B',
      data: [28, 48, 40, 19, 96],
      fill: true,
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgb(54, 162, 235)'
    }]
  },
  options: {
    scales: {
      r: {
        angleLines: { display: true },
        suggestedMin: 0,
        suggestedMax: 100
      }
    }
  }
});

Polar Area Chart

Like pie but with equal angles, varying radius:

new Chart(ctx, {
  type: 'polarArea',
  data: {
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
    datasets: [{
      data: [11, 16, 7, 3, 14],
      backgroundColor: [
        'rgba(255, 99, 132, 0.5)',
        'rgba(75, 192, 192, 0.5)',
        'rgba(255, 205, 86, 0.5)',
        'rgba(201, 203, 207, 0.5)',
        'rgba(54, 162, 235, 0.5)'
      ]
    }]
  }
});

Scatter Chart

Show correlation between two variables:

new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Data Points',
      data: [
        { x: 10, y: 20 },
        { x: 15, y: 10 },
        { x: 20, y: 30 },
        { x: 25, y: 25 }
      ],
      backgroundColor: 'rgb(255, 99, 132)'
    }]
  },
  options: {
    scales: {
      x: { type: 'linear', position: 'bottom' },
      y: { type: 'linear' }
    }
  }
});

Bubble Chart

Three-dimensional data visualization:

new Chart(ctx, {
  type: 'bubble',
  data: {
    datasets: [{
      label: 'Dataset',
      data: [
        { x: 20, y: 30, r: 15 },  // r = bubble radius
        { x: 40, y: 10, r: 10 },
        { x: 30, y: 22, r: 25 }
      ],
      backgroundColor: 'rgba(255, 99, 132, 0.5)'
    }]
  },
  options: {
    aspectRatio: 1  // Square chart for bubbles
  }
});

Area Chart

Line chart with filled area:

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'Revenue',
      data: [65, 59, 80, 81, 56],
      fill: true,  // Enable fill
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgb(75, 192, 192)'
    }]
  }
});

Fill Options

Value	Description
`false`	No fill (default)
`true`	Fill to origin
`'origin'`	Fill to origin
`'start'`	Fill to bottom
`'end'`	Fill to top
`'-1'`	Fill to previous dataset
`'+1'`	Fill to next dataset

Mixed Charts

Combine multiple chart types:

new Chart(ctx, {
  type: 'bar',  // Base type
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [
      {
        type: 'line',  // Override type for this dataset
        label: 'Trend',
        data: [50, 60, 70, 80],
        borderColor: 'rgb(255, 99, 132)',
        fill: false
      },
      {
        type: 'bar',  // Explicit bar type
        label: 'Sales',
        data: [40, 55, 65, 75],
        backgroundColor: 'rgba(54, 162, 235, 0.5)'
      }
    ]
  }
});

Drawing Order

Control which dataset renders on top:

datasets: [
  { label: 'Bars', order: 2 },  // Drawn first (behind)
  { label: 'Line', order: 1 }   // Drawn last (on top)
]

Data Structures

Standard Format

data: {
  labels: ['A', 'B', 'C'],
  datasets: [{
    data: [10, 20, 30]
  }]
}

Object Format

datasets: [{
  data: [
    { x: 'A', y: 10 },
    { x: 'B', y: 20 },
    { x: 'C', y: 30 }
  ]
}]

Parsed Data Format

datasets: [{
  data: [
    { id: 'Sales', value: 100 },
    { id: 'Revenue', value: 200 }
  ],
  parsing: {
    xAxisKey: 'id',
    yAxisKey: 'value'
  }
}]

Additional Resources

See
```
references/dataset-properties.md
```
for complete property reference
See
```
examples/
```
for working HTML examples:
- ```
line-area-charts.html
```
  - Line charts with tension, area fills, stepped lines
- ```
bar-charts.html
```
  - Vertical, horizontal, stacked bars, and mixed bar+line
- ```
circular-charts.html
```
  - Pie, doughnut, semi-circle gauge, polar area, radar