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

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