chart.js

Line Charts

Create line charts to display data trends over time or categories. The code sample initializes a line chart with a dataset and labels for the x-axis.

new Chart(document.getElementById('line-chart'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'Dataset 1', data: [0, 10, 5, 2, 20], fill: false }] }, options: { title: { display: true, text: 'Line Chart' } } });

Bar Charts

Create bar charts to compare different sets of data. The code sample sets up a bar chart with different colored bars and a y-axis that starts at zero.

new Chart(document.getElementById('bar-chart'), { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], datasets: [{ label: 'Dataset 1', data: [12, 19, 3, 5, 2], backgroundColor: ['rgba(255, 99, 132, 0.2)'] }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

Pie Charts

Create pie charts to illustrate numerical proportions in a dataset. The code sample creates a pie chart with three segments, each representing a portion of the whole.

new Chart(document.getElementById('pie-chart'), { type: 'pie', data: { labels: ['Red', 'Blue', 'Yellow'], datasets: [{ data: [300, 50, 100], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] }] }, options: { title: { display: true, text: 'Pie Chart' } } });

Radar Charts

Create radar charts to compare multiple quantitative variables. The code sample demonstrates a radar chart that compares different activities of a person.

new Chart(document.getElementById('radar-chart'), { type: 'radar', data: { labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], datasets: [{ label: 'Person A', data: [65, 59, 90, 81, 56, 55, 40], fill: true }] }, options: { title: { display: true, text: 'Radar Chart' } } });