Global utilities

Global configuration and utility object.

Global

The Global object provides access to global Recharts configuration and runtime information.

export const Global = {
  devToolsEnabled: boolean,
  isSsr: boolean,
};

Properties

devToolsEnabled

Indicates whether development tools are enabled.

Global.devToolsEnabled: boolean

Value:

• true - When process.env.NODE_ENV !== 'production'
• false - In production builds

Example:

import { Global } from 'recharts';

function CustomComponent() {
  if (Global.devToolsEnabled) {
    console.log('Development mode - extra debugging enabled');
  }
  
  return null;
}

isSsr

Indicates whether the code is running in a server-side rendering (SSR) environment.

Global.isSsr: boolean

Value:

• true - When running on the server (no window object available)
• false - When running in the browser

Detection logic:

const isSsr = !(
  typeof window !== 'undefined' && 
  window.document && 
  Boolean(window.document.createElement) && 
  window.setTimeout
);

Example:

import { Global } from 'recharts';

function CustomComponent() {
  if (Global.isSsr) {
    // Skip browser-only operations during SSR
    return <div>Loading chart...</div>;
  }
  
  // Browser-specific code
  const userAgent = window.navigator.userAgent;
  
  return <div>Chart ready</div>;
}

Usage notes

Server-side rendering

When using Recharts with SSR frameworks (Next.js, Gatsby, etc.), check Global.isSsr before accessing browser-only APIs:

import { Global } from 'recharts';
import { LineChart, Line } from 'recharts';

function ChartComponent({ data }) {
  // Skip expensive calculations during SSR
  const processedData = Global.isSsr 
    ? data 
    : expensiveClientProcessing(data);
  
  return (
    <LineChart width={600} height={300} data={processedData}>
      <Line dataKey="value" />
    </LineChart>
  );
}

Development tools

Use Global.devToolsEnabled to conditionally enable debugging features:

import { Global } from 'recharts';
import { useXAxisScale, useYAxisScale } from 'recharts';

function DebugOverlay() {
  const xScale = useXAxisScale();
  const yScale = useYAxisScale();
  
  if (!Global.devToolsEnabled) {
    return null; // Don't render in production
  }
  
  return (
    <g>
      <text x={10} y={20} fill="red" fontSize={12}>
        Debug Mode Active
      </text>
      {/* Add debug visualizations */}
    </g>
  );
}

TypeScript

The Global object is typed and can be imported from recharts:

import { Global } from 'recharts';

// Access with full type safety
const isServer: boolean = Global.isSsr;
const isDevelopment: boolean = Global.devToolsEnabled;