# Next.js Column Chart

A Next.js column chart for the App Router: grouped vertical bars per month in an ApexCharts client component of AdminKit PRO, with a tooltip formatter.

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

A column chart lines up vertical bars per category, so you compare months, products or regions by height. With several series, the bars of one category stand side by side as a group. [AdminKit for Next.js](/nextjs/) draws it with the `ApexChart` client component from [Chart setup](/nextjs/docs/charts/overview/#apexcharts), which wraps [ApexCharts](https://apexcharts.com/). For ApexCharts, it is a `bar` chart with `plotOptions.bar.horizontal: false`.

Pages in the App Router are server components, and they cannot pass functions to a client component. The options of this chart hold two functions: the options function itself and the tooltip `formatter`. So both stay in the client component file, the one that starts with `"use client"`.

## 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 title="src/components/finance-column-chart.tsx"
"use client";

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 page renders it like any other component and keeps its `metadata` export. List the route in `src/data/pages.json`, where `pageMetadata()` reads it:

```tsx title="src/app/(dashboard)/finance/page.tsx"
import { FinanceColumnChart } from "@/components/finance-column-chart";
import { pageMetadata } from "@/lib/site";

export const metadata = pageMetadata("/finance");

export default function FinancePage() {
  return (
    <div className="card">
      <div className="card-header">
        <h2 className="card-title mb-0">Cash flow</h2>
      </div>
      <div className="card-body">
        <FinanceColumnChart />
      </div>
    </div>
  );
}
```

## 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 |

## Series from the page

To keep the figures in the page, pass the series as props. Plain objects with strings and number arrays can cross from a server component to a client component:

```tsx title="src/components/finance-column-chart.tsx"
"use client";

import { ApexChart } from "@/components/plugins/apexcharts";

type Series = { name: string; data: number[] }[];

export function FinanceColumnChart({
  series,
  months,
}: {
  series: Series;
  months: string[];
}) {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          chart: { height: 350, type: "bar" },
          plotOptions: { bar: { borderRadius: 4, columnWidth: "55%" } },
          dataLabels: { enabled: false },
          series,
          xaxis: { categories: months },
          tooltip: {
            y: { formatter: (val: number) => "$ " + val + " thousands" },
          },
        })}
      />
    </div>
  );
}
```

## Options

- `plotOptions.bar.columnWidth` sets the width of a group of columns, as a percentage of the space per category. `borderRadius` rounds the column ends, in pixels.
- `stroke: { width: 2, colors: ["transparent"] }` leaves a 2px gap between the columns of one category.
- `chart.stacked: true` stacks the series into one column per category.
- `plotOptions.bar.horizontal: true` turns the columns into horizontal bars, as in the pipeline chart of the CRM dashboard.

## Accessibility

- The y-axis title gives the unit, "$ (thousands)", next to the numbers on the axis.
- The legend lists the series by name, so the colors are not the only key.
- The tooltip values show on hover only. Give exact figures in a table where they matter.
- Name the chart with props on its `<div>`: `role="figure"` and `aria-label`.

## Related

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

---

Canonical HTML page: https://adminkit.io/nextjs/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