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

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

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](/nextjs/) draws it with `ApexChart`, the [ApexCharts](https://apexcharts.com/) client component described in [Chart setup](/nextjs/docs/charts/overview/#apexcharts).

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

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

<script>
var 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: function(y) {
        if (typeof y !== "undefined") {
          return y.toFixed(0) + " points";
        }
        return y;
      }
    }
  }
}
adminkit.apexcharts("#apexcharts-mixed", function () {
  return options;
});
</script>
```
```tsx code title="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>
  );
}
```

```tsx title="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.

## Related

- [React mixed chart](/react/docs/charts/mixed-chart/): the same chart in AdminKit for React (Vite)
- [Bootstrap 5 mixed chart](/bootstrap/docs/charts/mixed-chart/): the ApexCharts example of the HTML version
- [Chart setup](/nextjs/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` client components
- [Next.js column chart](/nextjs/docs/charts/column-chart/) and [Next.js area chart](/nextjs/docs/charts/area-chart/): the two types on their own
- [ApexCharts demo](https://nextjs-demo.adminkit.io/charts-apexcharts)

---

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