---

name: chartjs-chart-types description: 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.

Chart.js Chart Types (v4.5.1)

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

Available Chart Types

Line Chart

Show trends and changes over time:

Copynew 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

Vertical Line Chart

Flip axes with indexAxis:

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

Bar Chart

Compare discrete categories:

Copynew 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

Horizontal Bar Chart

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

Stacked Bar Chart

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

Pie & Doughnut Charts

Show proportional data:

Copy// 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

Semi-Circle Chart

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

Radar Chart

Compare multiple variables across categories:

Copynew 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:

Copynew 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:

Copynew 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:

Copynew 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:

Copynew 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

Mixed Charts

Combine multiple chart types:

Copynew 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:

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

Data Structures

Standard Format

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

Object Format

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

Parsed Data Format

Copydatasets: [{
  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