---
product: "AG Charts"
title: "Development Validation"
description: "Report Angular Chart option misconfiguration and caught runtime errors to the console, a development overlay, or a custom logging system via the `issueRaised` event."
framework: angular
version: "14.2.0"
related:
    - title: "Installation"
      url: "https://www.ag-grid.com/charts/angular/installation/"
    - title: "Module Registry"
      url: "https://www.ag-grid.com/charts/angular/module-registry/"
    - title: "Enterprise Licence Key"
      url: "https://www.ag-grid.com/charts/angular/license-install/"
    - title: "Migration"
      url: "https://www.ag-grid.com/charts/angular/migration/"
    - title: "Server-Side Rendering"
      url: "https://www.ag-grid.com/charts/angular/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

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Validation Overlay](https://www.ag-grid.com/charts/angular/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

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Validation Console Output](https://www.ag-grid.com/charts/angular/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

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Validation Issue Events](https://www.ag-grid.com/charts/angular/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. |