> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Global utilities

Global configuration and utility object.

## Global

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

```typescript theme={null}
export const Global = {
  devToolsEnabled: boolean,
  isSsr: boolean,
};
```

### Properties

#### devToolsEnabled

Indicates whether development tools are enabled.

```typescript theme={null}
Global.devToolsEnabled: boolean
```

**Value:**

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

**Example:**

```tsx theme={null}
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.

```typescript theme={null}
Global.isSsr: boolean
```

**Value:**

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

**Detection logic:**

```typescript theme={null}
const isSsr = !(
  typeof window !== 'undefined' && 
  window.document && 
  Boolean(window.document.createElement) && 
  window.setTimeout
);
```

**Example:**

```tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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`:

```typescript theme={null}
import { Global } from 'recharts';

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