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:

javascript

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:

javascript

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

Bar Chart

Compare discrete categories:

javascript

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

javascript

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

Stacked Bar Chart

javascript

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

Pie & Doughnut Charts

Show proportional data:

javascript

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

javascript

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

Radar Chart

Compare multiple variables across categories:

javascript

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:

javascript

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:

javascript

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:

javascript

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:

javascript

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:

javascript

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:

javascript

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

Data Structures

Standard Format

javascript

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

Object Format

javascript

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

Parsed Data Format

javascript

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