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

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

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

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

| 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

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

## Related

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

---

Canonical HTML page: https://adminkit.io/react/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