# React Column Chart

A React column chart with ApexCharts in AdminKit PRO: vertical bars that compare three series per month, with a formatted tooltip and theme colors.

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

Use a column chart to compare values across categories, such as months. Each value is a vertical bar, and several series stand side by side: this example shows three per month.

In [AdminKit for React](/react/) you draw it with `ApexChart`, the [ApexCharts](https://apexcharts.com/) component from [Chart setup](/react/docs/charts/overview/#apexcharts). For ApexCharts, a column chart is a `bar` chart with vertical bars.

## Example

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

<script>
var options = {
  chart: {
    height: 350,
    type: "bar",
  },
  plotOptions: {
    bar: {
      horizontal: false,
      borderRadius: 4,
      columnWidth: "55%",
    },
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    show: true,
    width: 2,
    colors: ["transparent"]
  },
  series: [{
    name: "Net Profit",
    data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
  }, {
    name: "Revenue",
    data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
  }, {
    name: "Free Cash Flow",
    data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
  }],
  xaxis: {
    categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
  },
  yaxis: {
    title: {
      text: "$ (thousands)"
    }
  },
  fill: {
    opacity: 1
  },
  tooltip: {
    y: {
      formatter: function(val) {
        return "$ " + val + " thousands"
      }
    }
  }
}
adminkit.apexcharts("#apexcharts-column", function () {
  return options;
});
</script>
```
```tsx code
import { ApexChart } from "@/components/plugins/apexcharts";

export function FinanceColumnChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          chart: { height: 350, type: "bar" },
          plotOptions: {
            bar: { horizontal: false, borderRadius: 4, columnWidth: "55%" },
          },
          dataLabels: { enabled: false },
          stroke: { show: true, width: 2, colors: ["transparent"] },
          series: [
            { name: "Net Profit", data: [44, 55, 57, 56, 61, 58, 63, 60, 66] },
            { name: "Revenue", data: [76, 85, 101, 98, 87, 105, 91, 114, 94] },
            { name: "Free Cash Flow", data: [35, 41, 36, 26, 45, 48, 52, 53, 41] },
          ],
          xaxis: {
            categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
          },
          yaxis: { title: { text: "$ (thousands)" } },
          fill: { opacity: 1 },
          tooltip: {
            y: { formatter: (val: number) => "$ " + val + " thousands" },
          },
        })}
      />
    </div>
  );
}
```

The transparent 2px stroke leaves a gap between the columns of a month. The three series take the primary, success and warning colors of the wrapper.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `(theme: Theme) => ApexOptions` | | The ApexCharts options, with `series` and `chart.type`. Called again with the new colors when the color mode changes |

## Options

| Option | Effect |
| --- | --- |
| `plotOptions.bar.columnWidth` | Width of a group of columns, as a percentage of the space per category |
| `plotOptions.bar.borderRadius` | Rounds the end of each column, in pixels |
| `plotOptions.bar.horizontal` | `true` draws horizontal bars |
| `chart.stacked` | `true` stacks the series in one column per category |
| `tooltip.y.formatter` | Formats the value in the tooltip. `yaxis.labels.formatter` does the same for the axis |

The pipeline chart of the CRM dashboard is the horizontal variant. Here it has fixed values: one series in the primary color, and the grid in the border color of the current mode:

```tsx
<ApexChart
  options={(theme) => ({
    chart: { type: "bar", height: 300, toolbar: { show: false } },
    colors: [theme.primary],
    series: [{ name: "Value", data: [120, 84, 61, 42, 37] }],
    plotOptions: {
      bar: { horizontal: true, borderRadius: 4, barHeight: "60%" },
    },
    dataLabels: { enabled: false },
    grid: { borderColor: theme["border-color"] },
    xaxis: { categories: ["Lead", "Qualified", "Proposal", "Negotiation", "Won"] },
  })}
/>
```

## Accessibility

- The y-axis title says the unit ("$ (thousands)"), so the values make sense without the tooltip.
- The legend names the three series, so the colors are not the only key.
- Exact values show in the tooltip on hover only. Where they matter, give them in a table too.
- `ApexChart` passes other props to its `<div>`: `role="figure"` with an `aria-label` names the chart.

## Related

- [Next.js column chart](/nextjs/docs/charts/column-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 column chart](/bootstrap/docs/charts/column-chart/): the ApexCharts example of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` components
- [React mixed chart](/react/docs/charts/mixed-chart/): columns combined with an area and a line
- [ApexCharts demo](https://react-demo.adminkit.io/charts-apexcharts) and the [CRM dashboard](https://react-demo.adminkit.io/dashboard-crm) with its horizontal pipeline chart

---

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