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