Logo

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
  }
});
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 }
});