> 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/column.md).

# Column

### Chart Column

{% embed url="<https://codesandbox.io/s/zealous-paper-pg865m?file=/index.html>" %}

### Example of a static column 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 = {
          grid: {
            show: true,
            padding: {
              top: 20,
              right: 0,
              bottom: 0,
              left: 0
            }
          },
          colors: ["#4F46E5"],
          series: [
            {
              name: "Sales",
              data: [
                { x: "Jan", y: "30" },
                { x: "Feb", y: "60" },
                { x: "Mar", y: "53" },
                { x: "Apr", y: "45" },
                { x: "May", y: "60" },
                { x: "Jun", y: "75" },
                { x: "Jul", y: "53" }
              ]
            }
          ],
          chart: {
            toolbar: {
              show: true
            },
            type: "bar",
            height: 260,
            sparkline: {
              enabled: false
            }
          },
          plotOptions: {
            bar: {
              columnWidth: "40%",
              borderRadius: 4,
              dataLabels: {
                position: "top"
              }
            }
          },
          dataLabels: {
            enabled: true,
            formatter: function (val) {
              return val + "%";
            },
            offsetY: -20,
            style: {
              fontSize: "12px",
              colors: ["#304758"]
            }
          },
          xaxis: {
            axisBorder: {
              show: true
            },
            axisTicks: {
              show: true
            },
            labels: {
              show: true,
              formatter: function (val) {
                return val;
              }
            },
            tooltip: {
              enabled: true
            }
          },
          yaxis: {
            axisBorder: {
              show: true
            },
            axisTicks: {
              show: true
            },
            labels: {
              show: true,
              formatter: function (val) {
                return val + "%";
              }
            }
          }
        };

        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="/files/25fK71ZxBSZTKGjREQGu" alt=""><figcaption></figcaption></figure>

#### Content to show per list item

```
{x: '', y: ''}
```
