React Anomaly Detection Component, Live Demo

Add anomaly detection to a React app with a single component. @datastripes/anomaly/react analyzes historical data and highlights outliers out of the box, powered by the same anomaly detection engine used by the Vue, Angular, and vanilla JS builds of Datastripes, so the behavior (and the detection results) are identical no matter which frontend framework your app is built with.

The demo below is not a screenshot: it's the real DatastripesAnomaly component from @datastripes/anomaly/react, mounted live on this page with ReactDOM.createRoot. VitePress pages are Vue single-file components, but a <script setup> block can still import arbitrary npm packages, including React itself, and imperatively mount a React tree into a plain DOM node.

Source

import { DatastripesAnomaly } from '@datastripes/anomaly/react';

const rows = [
  { date: '2024-01-01', value: 102 },
  { date: '2024-01-02', value: 108 },
  { date: '2024-01-03', value: 99 }
  // ...
];

export function AnomalyDemo() {
  return (
    <DatastripesAnomaly
      data={rows}
      algorithm="ensemble"
      theme="dark"
      view="composite"
    />
  );
}

For more React-adjacent patterns, see Scatter detection (bivariate (x, y) outlier detection with useScatterAnomalyDetection) and Headless mode (the useAnomalyDetection hook with your own UI).