Write, Run & Share Chart.js code online using OneCompiler's Chart.js online editor for free. It's one of the robust, feature-rich online editors for Chart.js.
Chart.js is a free, open-source JavaScript library for creating responsive, animated charts. It supports eight chart types: bar, line, area, pie, doughnut, radar, polar area, and scatter. Charts are rendered using HTML5 Canvas.
To create a chart, you need a canvas element and JavaScript to configure the chart with type, data, and options.
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById("myChart")
new Chart(ctx, {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
datasets: [
{
label: "Votes",
data: [12, 19, 3, 5, 2],
backgroundColor: [
"rgba(255, 99, 132, 0.6)",
"rgba(54, 162, 235, 0.6)",
"rgba(255, 206, 86, 0.6)",
"rgba(75, 192, 192, 0.6)",
"rgba(153, 102, 255, 0.6)",
],
borderWidth: 1,
},
],
},
options: {
scales: {
y: { beginAtZero: true },
},
},
})
</script>
Bar charts display data as rectangular bars. Use type: 'bar' for vertical bars or indexAxis: 'y' for horizontal bars.
// Vertical bar chart with multiple datasets
new Chart(ctx, {
type: "bar",
data: {
labels: ["Q1", "Q2", "Q3", "Q4"],
datasets: [
{
label: "Sales 2023",
data: [65, 59, 80, 81],
backgroundColor: "rgba(54, 162, 235, 0.6)",
},
{
label: "Sales 2024",
data: [75, 69, 90, 95],
backgroundColor: "rgba(255, 99, 132, 0.6)",
},
],
},
options: {
plugins: {
title: { display: true, text: "Quarterly Sales" },
},
},
})
// Stacked bar chart
new Chart(ctx, {
type: "bar",
data: {
labels: ["Jan", "Feb", "Mar"],
datasets: [
{
label: "Desktop",
data: [100, 120, 115],
backgroundColor: "rgba(54, 162, 235, 0.6)",
},
{
label: "Mobile",
data: [80, 95, 110],
backgroundColor: "rgba(255, 99, 132, 0.6)",
},
],
},
options: {
scales: {
x: { stacked: true },
y: { stacked: true },
},
},
})
Line charts connect data points with lines, perfect for showing trends over time.
// Line chart with fill (area chart)
new Chart(ctx, {
type: "line",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: "Revenue",
data: [1200, 1900, 3000, 5000, 2300, 3200],
borderColor: "rgb(75, 192, 192)",
backgroundColor: "rgba(75, 192, 192, 0.2)",
fill: true,
tension: 0.4,
},
],
},
options: {
plugins: {
title: { display: true, text: "Monthly Revenue" },
},
},
})
// Multiple lines
new Chart(ctx, {
type: "line",
data: {
labels: ["Week 1", "Week 2", "Week 3", "Week 4"],
datasets: [
{
label: "Website",
data: [1000, 1200, 1100, 1500],
borderColor: "rgb(54, 162, 235)",
},
{
label: "Mobile App",
data: [800, 950, 1100, 1300],
borderColor: "rgb(255, 159, 64)",
},
],
},
})
Pie and doughnut charts show proportional data as slices of a circle.
// Pie chart
new Chart(ctx, {
type: "pie",
data: {
labels: ["Chrome", "Firefox", "Safari", "Edge"],
datasets: [
{
data: [65, 15, 10, 10],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0"],
},
],
},
options: {
plugins: {
legend: { position: "right" },
},
},
})
// Doughnut chart
new Chart(ctx, {
type: "doughnut",
data: {
labels: ["Completed", "In Progress", "Not Started"],
datasets: [
{
data: [60, 25, 15],
backgroundColor: ["#4BC0C0", "#FFCE56", "#FF6384"],
},
],
},
options: {
cutout: "60%",
},
})
Radar charts display multivariate data on axes from a common center point.
new Chart(ctx, {
type: "radar",
data: {
labels: ["Speed", "Strength", "Defense", "Magic", "Luck"],
datasets: [
{
label: "Player 1",
data: [85, 70, 60, 90, 75],
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255, 99, 132, 1)",
},
{
label: "Player 2",
data: [70, 85, 80, 65, 90],
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgba(54, 162, 235, 1)",
},
],
},
options: {
scales: {
r: { beginAtZero: true, max: 100 },
},
},
})
Scatter charts plot x,y coordinates. Bubble charts add a third dimension through point size.
// Scatter chart
new Chart(ctx, {
type: "scatter",
data: {
datasets: [
{
label: "Data Points",
data: [
{ x: 10, y: 20 },
{ x: 15, y: 25 },
{ x: 20, y: 10 },
{ x: 25, y: 30 },
],
backgroundColor: "rgba(255, 99, 132, 0.8)",
},
],
},
})
// Bubble chart
new Chart(ctx, {
type: "bubble",
data: {
datasets: [
{
label: "Countries",
data: [
{ x: 20, y: 30, r: 15 },
{ x: 40, y: 10, r: 10 },
{ x: 30, y: 20, r: 25 },
],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
},
],
},
})
Combine different chart types by specifying the type in each dataset.
new Chart(ctx, {
type: "bar",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
type: "bar",
label: "Sales",
data: [50, 60, 70, 80, 65, 75],
backgroundColor: "rgba(54, 162, 235, 0.6)",
},
{
type: "line",
label: "Trend",
data: [52, 58, 68, 78, 68, 72],
borderColor: "rgb(255, 99, 132)",
tension: 0.4,
},
],
},
})
Scales control the axes. Customize tick marks, grid lines, and ranges.
new Chart(ctx, {
type: "line",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May"],
datasets: [{ label: "Revenue", data: [12000, 19000, 15000, 25000, 22000] }],
},
options: {
scales: {
x: {
title: { display: true, text: "Month" },
grid: { display: false },
},
y: {
title: { display: true, text: "Revenue ($)" },
min: 0,
max: 30000,
ticks: {
callback: (value) => "$" + value.toLocaleString(),
},
},
},
},
})
Customize tooltips and use plugins to extend functionality.
new Chart(ctx, {
type: "bar",
data: {
labels: ["A", "B", "C", "D"],
datasets: [{ label: "Sales", data: [100, 200, 150, 250] }],
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (context) => "Revenue: $" + context.parsed.y.toLocaleString(),
},
},
legend: { position: "bottom" },
title: { display: true, text: "Sales Report" },
},
},
})
Update charts dynamically by modifying data and calling update().
const myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Jan", "Feb", "Mar"],
datasets: [{ label: "Sales", data: [10, 20, 30] }],
},
})
// Add data
myChart.data.labels.push("Apr")
myChart.data.datasets[0].data.push(40)
myChart.update()
// Remove data
myChart.data.labels.pop()
myChart.data.datasets[0].data.pop()
myChart.update()
// Update all data
myChart.data.datasets[0].data = [15, 25, 35, 45]
myChart.update()
Handle click events and configure interaction modes.
new Chart(ctx, {
type: "bar",
data: {
labels: ["A", "B", "C", "D"],
datasets: [{ label: "Values", data: [10, 20, 15, 25] }],
},
options: {
onClick: (event, elements) => {
if (elements.length > 0) {
const index = elements[0].index
alert(`Clicked: ${this.data.labels[index]}`)
}
},
interaction: {
mode: "index",
intersect: false,
},
},
})
Charts are responsive by default. Customize with aspectRatio or disable with responsive: false.
new Chart(ctx, {
type: "bar",
data: {
/* ... */
},
options: {
responsive: true,
maintainAspectRatio: true,
aspectRatio: 2,
},
})
