ScatterChart

// Framework-Agnostic Core
import { Chart } from '@nofinite/charts';

// React Adapter
import { ScatterChart } from '@nofinite/charts/react';

import { Chart } from '@nofinite/charts';
import '@nofinite/nuicss/styles.css';

const container = document.querySelector('#cluster-chart');

const chart = new Chart({
  element: container,
  variant: 'scatter',
  data: [
    { x: 10, y: 20 },
    { x: 25, y: 45 },
    { x: 40, y: 30 },
    { x: 55, y: 70 },
    { x: 70, y: 65 },
    { x: 85, y: 90 }
  ],
  xAccessor: (d) => d.x,
  yAccessor: (d) => d.y,
  color: 'var(--color-primary)',
  showGrid: true,
  showAxes: true,
  showCrosshair: true,
  showTooltip: true
});

// Update coordinate points reactively
chart.update([
  { x: 12, y: 24 },
  { x: 28, y: 50 },
  { x: 45, y: 35 },
  { x: 60, y: 78 }
]);

// Cleanup
chart.destroy();

import { ScatterChart } from '@nofinite/charts/react';

const clusterData = [
  { x: 10, y: 20 },
  { x: 25, y: 45 },
  { x: 40, y: 30 },
  { x: 55, y: 70 },
  { x: 70, y: 65 },
  { x: 85, y: 90 }
];

export default function ScatterCluster() {
  return (
    <div className="w-full h-64 p-4 border border-default rounded-xl bg-surface">
      <ScatterChart
        data={clusterData}
        xAccessor={(d) => d.x}
        yAccessor={(d) => d.y}
        pointColor="var(--color-primary)"
        showCrosshair={true}
        showTooltip={true}
      />
    </div>
  );
}