React Column Chart

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 you draw it with ApexChart, the ApexCharts component from Chart setup. For ApexCharts, a column chart is a bar chart with vertical bars.

ExampleCopy Anchor Link

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.

PropsCopy Anchor Link

OptionsCopy Anchor Link

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:

<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"] },
  })}
/>

AccessibilityCopy Anchor Link

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

RelatedCopy Anchor Link

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