---
product: "AG Charts"
title: "Development Validation"
description: "Report React Chart option misconfiguration and caught runtime errors to the console, a development overlay, or a custom logging system via the `issueRaised` event."
framework: react
version: "14.2.0"
related:
    - title: "Installation"
      url: "https://www.ag-grid.com/charts/react/installation/"
    - title: "Module Registry"
      url: "https://www.ag-grid.com/charts/react/module-registry/"
    - title: "Enterprise Licence Key"
      url: "https://www.ag-grid.com/charts/react/license-install/"
    - title: "Migration"
      url: "https://www.ag-grid.com/charts/react/migration/"
    - title: "Server-Side Rendering"
      url: "https://www.ag-grid.com/charts/react/server-side-rendering/"
llms: "https://www.ag-grid.com/charts/llms.txt"
---

# Development Validation

AG Charts reports option misconfiguration and caught runtime errors. Reports go to the browser console or a development overlay, the chart can throw to halt execution, and an event can be raised for each issue.

## Severity Levels

Each validation issue is reported as one of three severities: `error`, `warning`, or `deprecation`.

`consoleOn`, `showOverlayOn` and `throwOn` each take an array of one or more of these severities, and apply only to the ones listed. An empty array disables that option entirely.

The `issueRaised` event reports every issue and includes a `severity` property in the parameters.

## Validation Overlay

The overlay is opt-in and intended for development. Enable it by using `validations.showOverlayOn` and providing the severity levels desired.

#### Validation Overlay

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "Weekly Sales",
    },
    data: [
      { day: "Mon", sales: 56 },
      { day: "Tue", sales: 72 },
      { day: "Wed", sales: 64 },
      { day: "Thu", sales: 80 },
      { day: "Fri", sales: 91 },
    ],
    series: [
      {
        type: "bar",
        xKey: "day",
        yKey: "sales",
        // Invalid on purpose: two out-of-range values, so the overlay lists two warnings.
        fillOpacity: 2,
        strokeWidth: -5,
      },
    ],
    axes: {
      x: { type: "category" },
      y: { type: "number" },
    },
    validations: {
      showOverlayOn: ["error", "warning"],
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Validation Overlay](https://www.ag-grid.com/charts/reactFunctionalTs/dev-validation/examples/validation-overlay-multi/)

```js
{
    validations: {
        showOverlayOn: ['error', 'warning'],
    },
}
```

In this example:

- Any errors or warnings present would be shown in the overlay, but deprecations would not, since `showOverlayOn` only lists `'error'` and `'warning'`.
- Issues are grouped and sorted by severity, with a count in each group's heading.
- Each issue shows a message with relevant information to enable easy debugging.
- There is a Copy button for pasting into a bug report and dismissing the overlay hides it without suppressing future issues.
- While shown, the validation overlay takes priority over the loading and no-data overlays.

## Console Output

Validation issues are written to the browser console by default. Use `validations.consoleOn` to change which severities are logged, or provide an empty array to disable console output entirely.

#### Validation Console Output

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

let warningsForwardedToLog = false;
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "Weekly Sales",
    },
    data: [
      { day: "Mon", sales: 56 },
      { day: "Tue", sales: 72 },
      { day: "Wed", sales: 64 },
      { day: "Thu", sales: 80 },
      { day: "Fri", sales: 91 },
    ],
    series: [
      {
        type: "bar",
        xKey: "day",
        yKey: "sales",
      },
    ],
    axes: {
      x: { type: "category" },
      y: { type: "number" },
    },
  });

  // Invalid on purpose: opacity must be between 0 and 1, so this raises a validation warning.
  const applyInvalidOptions = () => {
    const nextOptions = clone(options);

    // Forward warnings written to the browser console into `console.log` too, so they're visible
    // without opening DevTools. Guarded so repeated clicks don't stack duplicate forwarding.
    if (!warningsForwardedToLog) {
      const originalWarn = console.warn.bind(console);
      console.warn = (...args: unknown[]) => {
        originalWarn(...args);
        console.log(...args);
      };
      warningsForwardedToLog = true;
    }
    const isWarningSelected = (
      document.getElementById("console-on-warning") as HTMLInputElement
    ).checked;
    const consoleOn: ("error" | "warning" | "deprecation")[] = isWarningSelected
      ? ["warning"]
      : [];
    nextOptions.series = [
      { type: "bar", xKey: "day", yKey: "sales", fillOpacity: 2 },
    ];
    nextOptions.validations = { consoleOn };

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <span>consoleOn:</span>
          <div
            className="button-group gap-right"
            role="group"
            aria-label="consoleOn"
          >
            <input
              type="radio"
              id="console-on-warning"
              name="console-on"
              defaultValue="warning"
              defaultChecked
            />
            <label htmlFor="console-on-warning">['warning']</label>
            <input
              type="radio"
              id="console-on-none"
              name="console-on"
              defaultValue="none"
            />
            <label htmlFor="console-on-none">[]</label>
          </div>
          <button onClick={applyInvalidOptions}>Apply Invalid Options</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Validation Console Output](https://www.ag-grid.com/charts/reactFunctionalTs/dev-validation/examples/validation-console/)

```js
{
    validations: {
        consoleOn: ['warning'],
    },
}
```

In the above example:

- Applying the invalid option with `consoleOn: ['warning']` selected logs a warning to the console.
- Applying it with `consoleOn: []` selected logs nothing.

## Throwing on Validation Issues

Use `validations.throwOn` to make the chart throw an exception and fail-fast, instead of warning and falling back to a default. This suits automated workflows (for example, end-to-end test runs or AI-assisted development) where a hard failure should be surfaced for immediate attention.

```js
{
    validations: {
        throwOn: ['warning'],
    },
}
```

- Issues can arise at any point, not just when the chart is created, so a throw may interrupt an update part-way and leave the chart in an inconsistent state. Use `throwOn` during development only, never in production.
- Console output still follows `consoleOn` and is never suppressed by this option.

## Issue Raised Events

Subscribe to the `validations.issueRaised` event to programmatically handle validation issues, for example to log them to a custom system.

#### Validation Issue Events

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgChartValidationIssueEvent,
  BarSeriesModule,
  CategoryAxisModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "Weekly Sales",
    },
    data: [
      { day: "Mon", sales: 56 },
      { day: "Tue", sales: 72 },
      { day: "Wed", sales: 64 },
      { day: "Thu", sales: 80 },
      { day: "Fri", sales: 91 },
    ],
    series: [
      {
        type: "bar",
        xKey: "day",
        yKey: "sales",
      },
    ],
    axes: {
      x: { type: "category" },
      y: { type: "number" },
    },
    validations: {
      // Disabled so the only console output is the explicit log below, not also the default warning.
      consoleOn: [],
      issueRaised: (event: AgChartValidationIssueEvent) => console.log(event),
    },
  });

  // Invalid on purpose: opacity must be between 0 and 1, so this raises a validation warning.
  const applyInvalidOptions = () => {
    const nextOptions = clone(options);

    nextOptions.series = [
      { type: "bar", xKey: "day", yKey: "sales", fillOpacity: 2 },
    ];

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={applyInvalidOptions}>Apply Invalid Options</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Validation Issue Events](https://www.ag-grid.com/charts/reactFunctionalTs/dev-validation/examples/validation-issue-raised/)

```js
{
    validations: {
        issueRaised: (event) => console.log(event),
    },
}
```

In this example:

- The `issueRaised` event is logged to the console when invalid options are applied.
- Unlike `consoleOn`, `showOverlayOn`, and `throwOn`, `issueRaised` is not filtered by severity.

## API Reference

#### Validations

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| consoleOn | Array<'error' \| 'warning' \| 'deprecation'> | ['error', 'warning', 'deprecation'] | The severities to write to the browser console. |
| showOverlayOn | Array<'error' \| 'warning' \| 'deprecation'> | [] | The severities to report in an overlay on the chart itself. |
| throwOn | Array<'error' \| 'warning' \| 'deprecation'> | [] | The severities that cause the chart to throw instead of warning and falling back to a default. Console output is never suppressed by this option. |
| issueRaised | Function | undefined | Called for each validation issue the chart raises. |