AdminKitDocs
Charts

React Mixed Chart

A React mixed chart with ApexCharts in AdminKit PRO: columns, an area and a line in one chart, with a shared tooltip, drawn by the ApexChart component.

Pro

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

Use a mixed chart when one chart type does not suit all your series. It draws different types on the same axes: this example has a column series, an area series and a line series.

In AdminKit for React you draw it with ApexChart, the ApexCharts component described in Chart setup.

Example

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

On the ApexCharts page of the demo, this chart sits in a card next to the other chart types.

Props

PropTypeDefaultDescription
options(theme: Theme) => ApexOptionsThe ApexCharts options, with series and chart.type. Called again with the new colors when the color mode changes

How the series combine

  • chart.type is the base type, "line". Each series sets its own type: "column", "area" or "line".
  • Options that take an array apply per series, in order. stroke.width: [0, 2, 5] gives the columns no outline, the area a 2px line and the line 5px. fill.opacity: [0.85, 0.25, 1] makes the area light enough to see the columns behind it.
  • labels are the x values of all series. With xaxis.type: "datetime" they are dates, here the first day of each month.
  • tooltip.shared: true with intersect: false shows the three values of a date in one tooltip, wherever the pointer is on that date.
  • The series take the primary, success and warning colors of the wrapper. To pick theme colors per series, return colors: [theme.primary, theme.info, theme.warning] from (theme) => ({ ... }).

Accessibility

  • The legend names each team next to its color.
  • The y-axis title, "Points", gives the unit. The shared tooltip shows the exact values on hover only, so give the figures in a table where they matter.
  • ApexChart passes other props to its <div>: name the chart with role="figure" and an aria-label.

Last updated on

Heatmap chartPro

A React heatmap chart with ApexCharts in AdminKit PRO: a grid of cells shaded by value, with color ranges from the theme for light and dark mode.

Scatter chartPro

A React scatter chart with ApexCharts in AdminKit PRO: three samples of points on two numeric axes, with zoom on both axes, in light and dark mode.

On this page

ExamplePropsHow the series combineAccessibilityRelated