Next.js Mixed Chart

A Next.js mixed chart for the App Router: column, area and line series on one axis in an ApexCharts client component of AdminKit PRO.

Pro

This component is only available in AdminKit PRO. Learn more.

A mixed chart lets each series take the form that suits it, on one set of axes. This example compares three teams as columns, an area and a line. AdminKit for Next.js draws it with ApexChart, the ApexCharts client component described in Chart setup.

Your page is a server component, and a server component cannot hand functions to a client component. The options function and the tooltip formatter are both functions. Keep the whole chart in a "use client" file and render it from the page.

Example

src/components/team-points-chart.tsx

"use client";

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

export function TeamPointsChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          chart: { height: 350, type: "line", stacked: false },
          stroke: { width: [0, 2, 5], curve: "smooth" },
          plotOptions: { bar: { columnWidth: "50%" } },
          series: [
            {
              name: "TEAM A",
              type: "column",
              data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
            },
            {
              name: "TEAM B",
              type: "area",
              data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
            },
            {
              name: "TEAM C",
              type: "line",
              data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
            },
          ],
          fill: {
            opacity: [0.85, 0.25, 1],
            gradient: {
              inverseColors: false,
              shade: "light",
              type: "vertical",
              opacityFrom: 0.85,
              opacityTo: 0.55,
              stops: [0, 100, 100, 100],
            },
          },
          labels: [
            "01/01/2026", "02/01/2026", "03/01/2026", "04/01/2026",
            "05/01/2026", "06/01/2026", "07/01/2026", "08/01/2026",
            "09/01/2026", "10/01/2026", "11/01/2026",
          ],
          markers: { size: 0 },
          xaxis: { type: "datetime" },
          yaxis: { title: { text: "Points" }, min: 0 },
          tooltip: {
            shared: true,
            intersect: false,
            y: {
              formatter: (y?: number) =>
                typeof y !== "undefined" ? y.toFixed(0) + " points" : String(y),
            },
          },
        })}
      />
    </div>
  );
}

src/app/(dashboard)/teams/page.tsx

import { TeamPointsChart } from "@/components/team-points-chart";
import { pageMetadata } from "@/lib/site";

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

export default function TeamsPage() {
  return (
    <div className="card">
      <div className="card-header">
        <h2 className="card-title mb-0">Points per team</h2>
      </div>
      <div className="card-body">
        <TeamPointsChart />
      </div>
    </div>
  );
}

Add /teams to src/data/pages.json, where pageMetadata() finds the title and description. The three data arrays could also come from the page as props. Arrays of numbers are serializable, so they can cross from the server component to the client component.

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

How the series combine

Option	Here
`chart.type`	`"line"`, the base type. Each series overrides it with its own `type`
`stroke.width`	`[0, 2, 5]`: one value per series, in order. The columns get no outline
`fill.opacity`	`[0.85, 0.25, 1]`: the area stays light enough to show the columns behind it
`labels`	The x values of all series, dates with `xaxis.type: "datetime"`
`tooltip.shared`	`true`, with `intersect: false`: one tooltip with the three values of a date

Unless the options set colors, the series take the primary, success and warning colors of the wrapper, read from the current color mode.

Accessibility

Each team is named in the legend, next to its color.
The y-axis title gives the unit, "Points". Exact values show in the shared tooltip on hover only. Put them in a table where they matter.
Other props of ApexChart go to its <div>: role="figure" and an aria-label name the chart.

React mixed chart: the same chart in AdminKit for React (Vite)
Bootstrap 5 mixed chart: the ApexCharts example of the HTML version
Chart setup: the ApexChart, ChartJs and VectorMap client components
Next.js column chart and Next.js area chart: the two types on their own
ApexCharts demo

ExampleCopy Anchor Link

PropsCopy Anchor Link

How the series combineCopy Anchor Link

AccessibilityCopy Anchor Link

RelatedCopy Anchor Link

On this page

Example

Props

How the series combine

Accessibility

Related