Package Exports

@recharts/devtools
@recharts/devtools/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@recharts/devtools) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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>
  );
}