@recharts/devtools

@recharts/devtools

Devtools for Recharts.

Installation

npm install @recharts/devtools --save-dev

Usage

Basic Usage

Import the RechartsDevtools component and render it inside of your chart.

Add a div with specific ID where the devtools will render a portal.

import { RechartsDevtools, RECHARTS_DEVTOOLS_PORTAL_ID } from '@recharts/devtools';
import { AreaChart } from 'recharts';

function App() {
  return (
    <article>
      <AreaChart>
        {/* The DevTools component reads state from inside of the chart */}
        <RechartsDevtools />
      </AreaChart>
        {/* The Portal component renders the devtools UI, debugging information, hooks and other stuff */}
      <div id={RECHARTS_DEVTOOLS_PORTAL_ID} />
    </article>
  );
}

Multiple Instances (Context Mode)

If you have multiple charts or devtools instances on the same page (e.g., in a documentation site with live editors), you should use the RechartsDevtoolsContext and RechartsDevtoolsPortal to ensure each devtools instance targets the correct location without ID conflicts.

• Wrap your chart and editor/devtools area with RechartsDevtoolsContext. One context for one devtools.
• Place RechartsDevtoolsPortal where you want the devtools UI to be rendered.
• RechartsDevtools will automatically detect the context and render into the associated portal.

import { RechartsDevtools, RechartsDevtoolsContext, RechartsDevtoolsPortal } from '@recharts/devtools';
import { AreaChart, LineChart } from 'recharts';

function EditorWithPreview() {
  return (
    <RechartsDevtoolsContext>
        <AreaChart>
          <RechartsDevtools />
        </AreaChart>
        <RechartsDevtoolsPortal />
    </RechartsDevtoolsContext>
      
    <RechartsDevtoolsContext>
        <LineChart>
          <RechartsDevtools />
        </LineChart>
        <RechartsDevtoolsPortal />
    </RechartsDevtoolsContext>
  );
}