> For the complete documentation index, see [llms.txt](https://bb-docs.gitbook.io/bubweb-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bb-docs.gitbook.io/bubweb-doc/help-guide/getting-started/charts/pie.md).

# Pie

Setting up the chart

### Chart Pie

{% embed url="<https://codesandbox.io/s/zen-hamilton-3nthst?file=/index.html>" %}

### Example of a static pie chart

All I did was make the hexadecimal **colors** and the chart **list dynamic**

{% code lineNumbers="true" %}

```html
<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = function () {
        var options = {
          legend: {
            fontSize: "14px",
            fontWeight: 600,
            fontFamily: "Inter, sans-serif",
            show: true,
            position: "right",
            formatter: function (val, opts) {
              return (
                val +
                " <span style='color: #374151;'>$" +
                opts.w.globals.series[opts.seriesIndex]
                  .toString()
                  .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") +
                "</span>"
              );
            },
            labels: {
              colors: "#9CA3AF",
              useSeriesColors: false
            },
            itemMargin: {
              horizontal: 6,
              vertical: 6
            }
          },
          tooltip: {
            enabled: true
          },
          plotOptions: {
            pie: {
              donut: {
                size: "60%",
                labels: {
                  show: true
                }
              },
              expandOnClick: true
            }
          },
          grid: {
            padding: {
              top: 0,
              right: 0,
              bottom: 0,
              left: 0
            }
          },
          colors: ["#F1416C", "#E5E7EB", "#4F46E5"],
          series: [7660, 2820, 45257],
          labels: ["Shoes", "Gaming", "Others"],
          chart: {
            type: "donut",
            height: "auto",
            width: 400,
            offsetX: 20,
            sparkline: {
              enabled: true
            }
          }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
      };
    </script>
  </head>
  <body>
    <div id="chart" style="width: 95%;"></div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  </body>
</html>

```

{% endcode %}

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2FaPjgc5gyIc4g7mNcPJjp%2Fchart-pie-format.png?alt=media&amp;token=c85bc684-49a7-49db-8591-b48a5b7c7367" alt=""><figcaption></figcaption></figure>

#### Content to show per list item

**Series**

```
7660, 2820, 45257
```

**Labels**

```
"Shoes", "Gaming", "Others"
```
