# React Scatter Chart

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.

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

Use a scatter chart to see how two values relate: whether one goes up with the other, and where the points cluster. Each point sits on two numeric axes.

[AdminKit for React](/react/) draws it with `ApexChart`, a React component around [ApexCharts](https://apexcharts.com/). The [Chart setup](/react/docs/charts/overview/#apexcharts) page has the details of the component.

The data is long, so the example keeps it in a constant outside the component. That also keeps it out of the options function, which runs again on every color mode change.

## Example

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

<script>
var options = {
  series: [{
    name: "SAMPLE A",
    data: [
      [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]
    ]
  }, {
    name: "SAMPLE B",
    data: [
      [36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]
    ]
  }, {
    name: "SAMPLE C",
    data: [
      [21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8], [21.4, 0], [21.7, 6.9], [28.6, 7.7], [15.4, 0], [18.1, 0], [33.4, 0], [16.4, 0]
    ]
  }],
  chart: {
    height: 350,
    type: "scatter",
    zoom: {
      enabled: true,
      type: "xy"
    }
  },
  xaxis: {
    tickAmount: 10,
    labels: {
      formatter: function (val) {
        return parseFloat(val).toFixed(1);
      }
    }
  },
  yaxis: {
    tickAmount: 7
  }
};

adminkit.apexcharts("#apexcharts-scatter", function () {
  return options;
});
</script>
```
```tsx code
import { ApexChart } from "@/components/plugins/apexcharts";

// [x, y] per point
const samples = [
  {
    name: "SAMPLE A",
    data: [
      [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2],
      [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3],
      [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2],
      [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0],
      [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8],
      [22.1, 2],
    ],
  },
  {
    name: "SAMPLE B",
    data: [
      [36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2],
      [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3],
      [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2],
      [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10],
      [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8],
      [2.1, 12],
    ],
  },
  {
    name: "SAMPLE C",
    data: [
      [21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2],
      [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5],
      [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8],
      [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8],
      [21.4, 0], [21.7, 6.9], [28.6, 7.7], [15.4, 0], [18.1, 0], [33.4, 0],
      [16.4, 0],
    ],
  },
];

export function SamplesScatterChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          series: samples,
          chart: {
            height: 350,
            type: "scatter",
            zoom: { enabled: true, type: "xy" },
          },
          xaxis: {
            tickAmount: 10,
            labels: { formatter: (val: string) => parseFloat(val).toFixed(1) },
          },
          yaxis: { tickAmount: 7 },
        })}
      />
    </div>
  );
}
```

The three samples take the primary, success and warning colors of the wrapper.

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

## Options

- Each point is `[x, y]`. ApexCharts makes the x-axis numeric for a scatter chart. `xaxis.labels.formatter` gets each tick as a string, and the example rounds it to one decimal.
- `tickAmount` sets the number of ticks: 10 on the x-axis, 7 on the y-axis.
- `chart.zoom` with `type: "xy"` lets the user drag a rectangle to zoom in on both axes. The toolbar has the buttons to zoom out and reset. `type: "x"` zooms the x-axis only.

## Accessibility

- Points of the three samples differ by color. The legend names the samples. `markers.shape` takes one shape per series, such as `"circle"` or `"square"`, so they differ by shape too.
- The coordinates of a point show in the tooltip on hover only. Give the conclusion of the chart (a trend, a cluster) in text.
- `ApexChart` passes other props to its `<div>`, so `role="figure"` and an `aria-label` name the chart.
- Zooming needs a mouse or touch drag. The same data at the default zoom must make sense without it.

## Related

- [Next.js scatter chart](/nextjs/docs/charts/scatter-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 scatter chart](/bootstrap/docs/charts/scatter-chart/): the ApexCharts example of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` components
- [React bubble chart](/react/docs/charts/bubble-chart/): points with a third value as the size
- [ApexCharts demo](https://react-demo.adminkit.io/charts-apexcharts): the line, area, bar, column, pie, heatmap, mixed and candlestick charts of the demo

---

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