Charts

Line Chart
Line charts usetype: "line" and are ideal for trends over time.
new Chart(document.getElementById("chartjs-line"), {
  type: "line",
  data: {
    labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
    datasets: [{
      label: "Sales",
      data: [2115,1562,1584,1892,1487,2223,2966,2448,2905,3838,2917,3327],
      borderColor: "#ff0055",
      backgroundColor: "transparent",
      fill: true
    }]
  },
  options: { maintainAspectRatio: false }
});
Bar Chart
Bar charts usetype: "bar" to compare values between categories.
new Chart(document.getElementById("chartjs-bar"), {
  type: "bar",
  data: {
    labels: ["Jan","Feb","Mar","Apr","May","Jun"],
    datasets: [{
      label: "Revenue",
      data: [54,67,41,55,62,45],
      backgroundColor: "#ff0055"
    }]
  },
  options: { maintainAspectRatio: false }
});
Doughnut Chart
Doughnut charts usetype: "doughnut" for proportional data.
new Chart(document.getElementById("chartjs-doughnut"), {
  type: "doughnut",
  data: {
    labels: ["Social","Search","Direct","Other"],
    datasets: [{
      data: [260,125,54,146],
      backgroundColor: ["#ff0055","#17a2b8","#dc3545","#dee2e6"],
      borderColor: "transparent"
    }]
  },
  options: { maintainAspectRatio: false, cutout: "65%" }
});
Pie Chart
Pie charts usetype: "pie" to show percentage distribution.
new Chart(document.getElementById("chartjs-pie"), {
  type: "pie",
  data: {
    labels: ["Social","Search","Direct","Other"],
    datasets: [{
      data: [260,125,54,146],
      backgroundColor: ["#ff0055","#17a2b8","#dc3545","#dee2e6"]
    }]
  },
  options: { maintainAspectRatio: false }
});
Area Chart
Area charts are line charts withfill: true enabled.
new Chart(document.getElementById("chartjs-area"), {
  type: "line",
  data: {
    labels: ["Mon","Tue","Wed","Thu","Fri"],
    datasets: [{
      label: "Visitors",
      data: [120,190,300,250,220],
      borderColor: "#17a2b8",
      backgroundColor: "rgba(23,162,184,.3)",
      fill: true
    }]
  },
  options: { maintainAspectRatio: false }
});
Horizontal Bar Chart
Horizontal bars useindexAxis: "y".
new Chart(document.getElementById("chartjs-horizontal"), {
  type: "bar",
  data: {
    labels: ["Chrome","Firefox","Safari","Edge"],
    datasets: [{
      label: "Users",
      data: [65,59,80,81],
      backgroundColor: "#ff0055"
    }]
  },
  options: {
    indexAxis: "y",
    maintainAspectRatio: false
  }
});
Grouped Bar Chart
Compare multiple datasets side-by-side per period.
new Chart(document.getElementById("chartjs-grouped-bar"), {
  type: "bar",
  data: {
    labels: ["Q1","Q2","Q3","Q4"],
    datasets: [
      {
        label: "2025",
        data: [42,55,68,80],
        backgroundColor: "#6c757d"
      },
      {
        label: "2026",
        data: [58,74,89,105],
        backgroundColor: "#ff0055"
      }
    ]
  },
  options: { maintainAspectRatio: false }
});
Stacked Bar Chart
Enablestacked: true on x and y scales.
new Chart(document.getElementById("chartjs-stacked-bar"), {
  type: "bar",
  data: {
    labels: ["Jan","Feb","Mar","Apr","May","Jun"],
    datasets: [
      { label: "Organic", data: [20,30,40,35,45,50], backgroundColor: "#17a2b8" },
      { label: "Referral", data: [15,20,25,22,28,32], backgroundColor: "#ffc107" },
      { label: "Paid", data: [25,35,45,40,50,60], backgroundColor: "#ff0055" }
    ]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      x: { stacked: true },
      y: { stacked: true }
    }
  }
});
Multi-Axis Line Chart
Independent Y-axes withyAxisID: "y" andyAxisID: "y1".
new Chart(document.getElementById("chartjs-multi-axis"), {
  type: "line",
  data: {
    labels: ["Jan","Feb","Mar","Apr","May","Jun"],
    datasets: [
      {
        label: "Revenue ($k)",
        data: [35,48,52,64,78,92],
        borderColor: "#ff0055",
        yAxisID: "y"
      },
      {
        label: "Orders",
        data: [120,180,210,290,340,410],
        borderColor: "#17a2b8",
        yAxisID: "y1"
      }
    ]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      y: { type: "linear", position: "left" },
      y1: { type: "linear", position: "right", grid: { drawOnChartArea: false } }
    }
  }
});
Stepped Line Chart
Step progression line withstepped: true.
new Chart(document.getElementById("chartjs-stepped"), {
  type: "line",
  data: {
    labels: ["Day 1","Day 2","Day 3","Day 4","Day 5","Day 6"],
    datasets: [{
      label: "Active Server Instances",
      data: [4,4,8,8,12,16],
      borderColor: "#20c997",
      backgroundColor: "rgba(32,201,151,0.15)",
      stepped: true,
      fill: true
    }]
  },
  options: { maintainAspectRatio: false }
});
Radar Chart
Radar charts usetype: "radar" for multi-variable comparison.
new Chart(document.getElementById("chartjs-radar"), {
  type: "radar",
  data: {
    labels: ["Speed","Reliability","Comfort","Safety","Efficiency"],
    datasets: [{
      label: "Car A",
      data: [65,59,90,81,56],
      backgroundColor: "rgba(255,0,85,.3)",
      borderColor: "#ff0055"
    }]
  },
  options: { maintainAspectRatio: false }
});
Polar Area Chart
Polar area charts usetype: "polarArea".
new Chart(document.getElementById("chartjs-polar"), {
  type: "polarArea",
  data: {
    labels: ["Red","Blue","Yellow","Green"],
    datasets: [{
      data: [11,16,7,14],
      backgroundColor: ["#ff0055","#17a2b8","#ffc107","#28a745"]
    }]
  },
  options: { maintainAspectRatio: false }
});
Bubble Chart
3-dimensional data points withx, y, r radius coordinates.
new Chart(document.getElementById("chartjs-bubble"), {
  type: "bubble",
  data: {
    datasets: [
      {
        label: "Product A",
        data: [{x: 20, y: 30, r: 15}, {x: 40, y: 10, r: 10}, {x: 25, y: 40, r: 25}, {x: 35, y: 25, r: 18}],
        backgroundColor: "rgba(255,0,85,0.6)"
      },
      {
        label: "Product B",
        data: [{x: 10, y: 40, r: 10}, {x: 30, y: 20, r: 20}, {x: 45, y: 35, r: 14}, {x: 15, y: 15, r: 12}],
        backgroundColor: "rgba(23,162,184,0.6)"
      }
    ]
  },
  options: { maintainAspectRatio: false }
});
Scatter Chart
Scatter plot plotting X and Y coordinate pairs.
new Chart(document.getElementById("chartjs-scatter"), {
  type: "scatter",
  data: {
    datasets: [{
      label: "Observations",
      data: [
        {x: -10, y: 0}, {x: 0, y: 10}, {x: 10, y: 5},
        {x: 0.5, y: 5.5}, {x: 15, y: 25}, {x: 20, y: 18}
      ],
      backgroundColor: "#ff0055"
    }]
  },
  options: { maintainAspectRatio: false }
});