---
product: "AG Charts"
title: "Development Validation"
description: "Report Vue Chart option misconfiguration and caught runtime errors to the console, a development overlay, or a custom logging system via the `issueRaised` event."
framework: vue
version: "14.2.0"
related:
    - title: "Installation"
      url: "https://www.ag-grid.com/charts/vue/installation/"
    - title: "Module Registry"
      url: "https://www.ag-grid.com/charts/vue/module-registry/"
    - title: "Enterprise Licence Key"
      url: "https://www.ag-grid.com/charts/vue/license-install/"
    - title: "Migration"
      url: "https://www.ag-grid.com/charts/vue/migration/"
    - title: "Server-Side Rendering"
      url: "https://www.ag-grid.com/charts/vue/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
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  CategoryAxisModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

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

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Validation Overlay](https://www.ag-grid.com/charts/vue3/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
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  CategoryAxisModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

let warningsForwardedToLog = false;

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <span>consoleOn:</span>
        <div class="button-group gap-right" role="group" aria-label="consoleOn">
          <input type="radio" id="console-on-warning" name="console-on" value="warning" checked="">
            <label for="console-on-warning">['warning']</label>
            <input type="radio" id="console-on-none" name="console-on" value="none">
              <label for="console-on-none">[]</label>
            </div>
            <button v-on:click="applyInvalidOptions()">Apply Invalid Options</button>
          </div>
        </div>
        <ag-charts
          :options="options"
        />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 optionsCopy = clone(options.value);

      // 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) => {
          originalWarn(...args);
          console.log(...args);
        };
        warningsForwardedToLog = true;
      }
      const isWarningSelected =
        document.getElementById("console-on-warning").checked;
      const consoleOn = isWarningSelected ? ["warning"] : [];
      optionsCopy.series = [
        { type: "bar", xKey: "day", yKey: "sales", fillOpacity: 2 },
      ];
      optionsCopy.validations = { consoleOn };

      options.value = optionsCopy;
    };

    return {
      options,
      applyInvalidOptions,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Validation Console Output](https://www.ag-grid.com/charts/vue3/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
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  CategoryAxisModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="applyInvalidOptions()">Apply Invalid Options</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => console.log(event),
      },
    });

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

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

      options.value = optionsCopy;
    };

    return {
      options,
      applyInvalidOptions,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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