# Bootstrap 5 Pie Chart

Pie charts show parts of a whole as percentages and ratios. Chart.js and ApexCharts examples that follow light and dark mode.

## Chart.js example

`adminkit.chartjs()` creates the Chart.js chart from a function of the theme colors and calls it again when the [color mode](/bootstrap/docs/getting-started/dark-mode/#charts-and-maps) changes.

```html
<div class="chart">
  <canvas id="chartjs-pie"></canvas>
</div>

<script>
adminkit.chartjs("#chartjs-pie", function (theme) {
  return {
    type: "pie",
    data: {
      labels: ["Social", "Search Engines", "Direct", "Other"],
      datasets: [{
        data: [260, 125, 54, 146],
        backgroundColor: [
          theme.primary,
          theme.warning,
          theme.danger,
          "#dee2e6"
        ],
        borderColor: "transparent"
      }]
    },
    options: {
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        }
      }
    }
  };
});
</script>
```

## ApexCharts example

> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/).

`adminkit.apexcharts()` renders the chart and updates it when the [color mode](/bootstrap/docs/getting-started/dark-mode/#charts-and-maps) changes.

```html
<div id="apexcharts-pie"></div>

<script>
var options = {
  chart: {
    height: 350,
    type: "pie",
  },
  dataLabels: {
    enabled: false
  },
  series: [44, 55, 13, 33]
}
adminkit.apexcharts("#apexcharts-pie", function () {
  return options;
});
</script>
```

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/charts/pie-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io