Doughnut Chart

Doughnut charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.

Chart.js example

new Chart(document.getElementById("chartjs-doughnut"), {
  type: "doughnut",
  data: {
    labels: ["Social", "Search Engines", "Direct", "Other"],
    datasets: [{
      data: [260, 125, 54, 146],
      backgroundColor: [
        window.theme.primary,
        window.theme.success,
        window.theme.warning,
        "#dee2e6"
      ],
      borderColor: "transparent"
    }]
  },
  options: {
    maintainAspectRatio: false,
    cutoutPercentage: 65,
  }
});

ApexCharts example

WARNING

This feature is only available in AdminKit PRO. Learn more.

var options = {
  chart: {
    height: 350,
    type: "donut",
  },
  dataLabels: {
    enabled: false
  },
  series: [44, 55, 13, 33]
}
var chart = new ApexCharts(
  document.querySelector("#apexcharts-doughnut"),
  options
);
chart.render();