# Bootstrap 5 Bar Chart

Bar charts compare values between categories with horizontal or vertical bars. 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-bar"></canvas>
</div>

<script>
adminkit.chartjs("#chartjs-bar", function (theme) {
  return {
    type: "bar",
    data: {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [{
        label: "Last year",
        backgroundColor: theme.primary,
        borderColor: theme.primary,
        hoverBackgroundColor: theme.primary,
        hoverBorderColor: theme.primary,
        data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
        barPercentage: .75,
        categoryPercentage: .5
      }, {
        label: "This year",
        backgroundColor: "#dee2e6",
        borderColor: "#dee2e6",
        hoverBackgroundColor: "#dee2e6",
        hoverBorderColor: "#dee2e6",
        data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68],
        barPercentage: .75,
        categoryPercentage: .5
      }]
    },
    options: {
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        }
      },
      scales: {
        y: {
          grid: {
            display: false
          },
          border: {
            display: false
          },
          stacked: false,
          ticks: {
            stepSize: 20
          }
        },
        x: {
          stacked: false,
          grid: {
            color: "transparent"
          },
          border: {
            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-bar"></div>

<script>
var options = {
  chart: {
    height: 350,
    type: "bar",
    stacked: true,
  },
  plotOptions: {
    bar: {
      horizontal: true,
    },
  },
  stroke: {
    width: 1,
    colors: ["#fff"]
  },
  series: [{
    name: "Marine Sprite",
    data: [44, 55, 41, 37, 22, 43, 21]
  }, {
    name: "Striking Calf",
    data: [53, 32, 33, 52, 13, 43, 32]
  }, {
    name: "Tank Picture",
    data: [12, 17, 11, 9, 15, 11, 20]
  }, {
    name: "Bucket Slope",
    data: [9, 7, 5, 8, 6, 9, 4]
  }, {
    name: "Reborn Kid",
    data: [25, 12, 19, 32, 25, 24, 10]
  }],
  xaxis: {
    categories: [2020, 2021, 2022, 2023, 2024, 2025, 2026],
    labels: {
      formatter: function(val) {
        return val + "K"
      }
    }
  },
  yaxis: {
    title: {
      text: undefined
    },
  },
  tooltip: {
    y: {
      formatter: function(val) {
        return val + "K"
      }
    }
  },
  fill: {
    opacity: 1
  },
  legend: {
    position: "top",
    horizontalAlign: "left",
    offsetX: 40
  }
}
adminkit.apexcharts("#apexcharts-bar", function () {
  return options;
});
</script>
```

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/charts/bar-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