Next.js Column Chart

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 draws it with the ApexChart client component from Chart setup, which wraps ApexCharts. 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".

ExampleCopy Anchor Link

"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:

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>
  );
}

PropsCopy Anchor Link

Series from the pageCopy Anchor Link

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:

"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>
  );
}

OptionsCopy Anchor Link

• 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.

AccessibilityCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• React column chart: the same chart in AdminKit for React (Vite)
• Bootstrap 5 column chart: the ApexCharts example of the HTML version
• Chart setup: the ApexChart, ChartJs and VectorMap client components
• Next.js mixed chart: columns combined with an area and a line
• ApexCharts demo and the CRM dashboard with its horizontal pipeline chart