### Chart Example Setup

Source: https://www.ag-grid.com/charts/react/events

Basic setup for rendering a chart example using createRoot.

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

--------------------------------

### Basic Chord Series Setup

Source: https://www.ag-grid.com/charts/react/chord-series

This example demonstrates the basic setup for a Chord Series in ag-Charts React. It includes necessary module registration and a sample data configuration for visualizing global migrations.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AnimationModule,
  ChordSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  ChordSeriesModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    title: {
      text: "Global Migrations between Continents",
    },
    subtitle: {
      text: "2023",
    },
    data: [
      { from: "Asia", to: "Europe", size: 20 },
      { from: "Asia", to: "Americas", size: 19 },
      { from: "Asia", to: "Africa", size: 4 },
      { from: "Asia", to: "Oceania", size: 8 },
      { from: "Europe", to: "Asia", size: 5 },
      { from: "Europe", to: "Americas", size: 5 },
      { from: "Europe", to: "Africa", size: 3 },
      { from: "Europe", to: "Oceania", size: 2 },
      { from: "Americas", to: "Asia", size: 4 },
      { from: "Americas", to: "Europe", size: 5 },
      { from: "Americas", to: "Africa", size: 11 },
      { from: "Americas", to: "Oceania", size: 6 },
      { from: "Africa", to: "Asia", size: 3 },
      { from: "Africa", to: "Europe", size: 9 },
      { from: "Africa", to: "Americas", size: 3 },
      { from: "Oceania", to: "Asia", size: 1 },
      { from: "Oceania", to: "Europe", size: 1 },
      { from: "Oceania", to: "Americas", size: 1 },
    ],
    series: [
      {
        type: "chord",
        fromKey: "from",
        toKey: "to",
        sizeKey: "size",
        sizeName: "Migration (millions)",
      },
    ],
  });

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

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

```

--------------------------------

### Simple Pie Chart Setup

Source: https://www.ag-grid.com/charts/react/pie-series

This example demonstrates the basic setup for a Pie Series in ag-Charts React. It registers the necessary modules and configures the chart with sample data, a title, and a pie series definition. Ensure the 'root' element exists in your HTML.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    title: {
      text: "Portfolio Composition",
    },
    series: [
      {
        type: "pie",
        angleKey: "amount",
        legendItemKey: "asset",
      },
    ],
  });

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

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

```

--------------------------------

### React Heatmap Series Setup

Source: https://www.ag-grid.com/charts/react/heatmap-series

This example demonstrates how to set up a basic Heatmap Series in a React application using ag-Charts Enterprise. It includes necessary module registrations and component structure.

```jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  GradientLegendModule,
  HeatmapSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  GradientLegendModule,
  HeatmapSeriesModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    title: {
      text: "UK monthly mean temperature °C",
    },
    series: [
      {
        type: "heatmap",
        xKey: "month",
        xName: "Month",
        yKey: "year",
        yName: "Year",
        colorKey: "temperature",
        colorName: "Temperature",
      },
    ],
  });

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

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

```

--------------------------------

### Complete AG Charts React Example with Secondary Axes

Source: https://www.ag-grid.com/charts/react/create-a-basic-chart

This example demonstrates a complete AG Charts React component setup, including data, series, and secondary axes configuration. Ensure necessary modules are registered.

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

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

const ChartExample = () => {
  const [options, setOptions] = useState({
    // Data: Data to be displayed within the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "priceAxis",
      },
      {
        type: "line",
        xKey: "month",
        yKey: "avgTemp",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "temperatureAxis",
      },
    ],
    // Axes: Configure the axes for the chart
    axes: {
      // Use left axis for 'iceCreamSales' series
      priceAxis: {
        type: "number",
        position: "left",
      },
      // Use right axis for 'avgTemp' series
      temperatureAxis: {
        type: "number",
        position: "right",
      },
    },
  });

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

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

```

--------------------------------

### Basic Radial Gauge Setup in React

Source: https://www.ag-grid.com/charts/react/radial-gauge

This snippet demonstrates the basic setup for a Radial Gauge chart in a React application. It includes necessary module registrations and state management for chart options. Ensure ag-charts-enterprise is installed for module support.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    type: "radial-gauge",

    value: 80,
    scale: {
      min: 0,
      max: 100,
    },
  });

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

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

```

--------------------------------

### AG Charts Enterprise Setup with Modules

Source: https://www.ag-grid.com/charts/react/key-features

Import and register necessary modules from `ag-charts-enterprise` to enable enterprise features like Animation, Context Menu, Crosshair, Legend, Navigator, and Zoom. This example demonstrates a typical setup in a React application.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NavigatorModule,
  NumberAxisModule,
  ZoomModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    zoom: {
      enabled: true,
      autoScaling: { enabled: true },
    },
    tooltip: {
      enabled: false,
    },
    navigator: {
      miniChart: {
        enabled: true,
      },
    },
    axes: {
      x: {
        type: "number",
        nice: false,
        interval: {
          minSpacing: 80,
          maxSpacing: 120,
        },
        label: {
          autoRotate: false,
        },
      },
    },
    data: getData(),
    animation: {
      duration: 1500, // ms
    },
    series: [
      {
        type: "line",
        xKey: "year",
        yKey: "spending",
        marker: {
          enabled: false,
        },
      },
    ],
  });

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

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

```

--------------------------------

### Install ag-charts-server-side with NPM

Source: https://www.ag-grid.com/charts/react/server-side-rendering

Install the server-side rendering package using npm.

```bash
npm install ag-charts-server-side

```

--------------------------------

### Simple Bar Series Example

Source: https://www.ag-grid.com/charts/react/bar-series

Demonstrates a basic Bar Series setup with grouped bars for comparing data across categories. It includes necessary module registrations and component structure for a React application.

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

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

const ChartExample = () => {
  const [options, setOptions] = useState({
    title: {
      text: "Apple's Revenue by Product Category",
    },
    subtitle: {
      text: "In Billion U.S. Dollars",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "iphone",
        yName: "iPhone",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "mac",
        yName: "Mac",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "ipad",
        yName: "iPad",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "wearables",
        yName: "Wearables",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "services",
        yName: "Services",
      },
    ],
  });

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

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

```

--------------------------------

### Install ag-charts-server-side with Yarn

Source: https://www.ag-grid.com/charts/react/server-side-rendering

Install the server-side rendering package using Yarn.

```bash
yarn add ag-charts-server-side

```

--------------------------------

### Registering No Modules

Source: https://www.ag-grid.com/charts/react/module-registry

An example snippet showing how to register no modules, typically used as a starting point before selecting specific features.

```javascript
import {
    ModuleRegistry,
} from 'ag-charts-community';

ModuleRegistry.registerModules([
    // no modules selected
]);

```

--------------------------------

### Install ag-charts-enterprise with Yarn

Source: https://www.ag-grid.com/charts/react/installation

Install the ag-charts-enterprise package for AG Charts Enterprise features using Yarn.

```bash
yarn add ag-charts-enterprise

```

--------------------------------

### Install ag-charts-enterprise with NPM

Source: https://www.ag-grid.com/charts/react/installation

Install the ag-charts-enterprise package for AG Charts Enterprise features using NPM.

```bash
npm install ag-charts-enterprise

```

--------------------------------

### Install ag-charts-react with NPM

Source: https://www.ag-grid.com/charts/react/installation

Install the ag-charts-react package, which includes ag-charts-community, using NPM.

```bash
npm install ag-charts-react

```

--------------------------------

### Install ag-charts-react with Yarn

Source: https://www.ag-grid.com/charts/react/installation

Install the ag-charts-react package, which includes ag-charts-community, using Yarn.

```bash
yarn add ag-charts-react

```

--------------------------------

### Install Dependencies using npm

Source: https://www.ag-grid.com/charts/react/license-install

Alternatively, install the AG Charts Enterprise and AG Charts React packages directly using npm.

```bash
npm install ag-charts-enterprise ag-charts-react
```

--------------------------------

### React Radial Column Series Example

Source: https://www.ag-grid.com/charts/react/radial-column-series

A basic example demonstrating how to set up and render a Radial Column Series using ag-Charts React. Ensure all necessary modules are registered before use.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AngleCategoryAxisModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  RadialColumnSeriesModule,
  RadiusNumberAxisModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  RadialColumnSeriesModule,
  AngleCategoryAxisModule,
  RadiusNumberAxisModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    title: {
      text: "Revenue by Product Category",
    },
    subtitle: {
      text: "Millions USD",
    },
    series: [
      {
        type: "radial-column",
        angleKey: "quarter",
        radiusKey: "software",
        radiusName: "Software",
      },
      {
        type: "radial-column",
        angleKey: "quarter",
        radiusKey: "hardware",
        radiusName: "Hardware",
      },
      {
        type: "radial-column",
        angleKey: "quarter",
        radiusKey: "services",
        radiusName: "Services",
      },
    ],
  });

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

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

```

--------------------------------

### Basic Waterfall Chart Setup

Source: https://www.ag-grid.com/charts/react/waterfall-series

This snippet demonstrates the basic setup for a Waterfall Series in ag-Charts React. It includes necessary module registration and component configuration. Ensure you have the enterprise modules installed and registered.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  WaterfallSeriesModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  WaterfallSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "All values in £ billions",
    },
    series: [
      {
        type: "waterfall",
        xKey: "financials",
        xName: "Financials",
        yKey: "amount",
        yName: "Amount",
      },
    ],
  });

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

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

```

--------------------------------

### Basic React Chart Setup with Modules

Source: https://www.ag-grid.com/charts/react/layout

Demonstrates how to set up a basic bar chart in React, registering necessary modules for axes, series, and legend. The chart is configured with sample data and styling.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  LegendModule,
  BarSeriesModule,
  CategoryAxisModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import "./styles.css";

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

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ],
    series: [{ type: "bar", xKey: "month", yKey: "iceCreamSales" }],
  });

  return (
    <div className="layout-container">
      <AgCharts
        options={options}
        className="chart"
        style={{ height: "400px" }}
      />
    </div>
  );
};

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

```

--------------------------------

### Map Line Series Data and Topology Configuration

Source: https://www.ag-grid.com/charts/react/map-lines

This example illustrates how to configure the data and topology for a Map Line Series. Both chart-level and series-level configurations are shown.

```javascript
data: data,
topology: topology,
series: [
    {
        type: 'map-shape-background',
        topology: backgroundTopology,
    },
    {
        type: 'map-line',
        idKey: 'name',
    },
]
```

--------------------------------

### Simple Radar Area Chart Example

Source: https://www.ag-grid.com/charts/react/radar-area-series

This example demonstrates how to create a basic Radar Area Series chart using ag-Charts React. It includes necessary module registration and component setup. Ensure you have the required enterprise modules registered.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AngleCategoryAxisModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  RadarAreaSeriesModule,
  RadiusNumberAxisModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  RadarAreaSeriesModule,
  AngleCategoryAxisModule,
  RadiusNumberAxisModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    title: {
      text: "KPIs by Department",
    },
    series: [
      {
        type: "radar-area",
        angleKey: "department",
        radiusKey: "quality",
        radiusName: "Quality",
      },
      {
        type: "radar-area",
        angleKey: "department",
        radiusKey: "efficiency",
        radiusName: "Efficiency",
      },
    ],
  });

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

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

```

--------------------------------

### React Chart Download and Image Data URL Example

Source: https://www.ag-grid.com/charts/react/api-download

This example demonstrates how to obtain an AgChartInstance using a React ref and utilize its download() and getImageDataURL() methods. It shows how to trigger a direct download and how to open a base64 encoded image in a new tab.

```javascript
import React, { useState, useRef, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

function buildSeries(name) {
  return {
    type: "area",
    xKey: "year",
    yKey: name.toLowerCase(),
    yName: name,
    fillOpacity: 0.5,
  };
}
ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const chartRef = useRef(null);
  const [options, setOptions] = useState({
    title: {
      text: "Browser Usage Statistics",
    },
    subtitle: {
      text: "2009-2019",
    },
    data: getData(),
    series: [
      buildSeries("IE"),
      buildSeries("Chrome"),
      buildSeries("Firefox"),
      buildSeries("Safari"),
    ],
    legend: { position: "top" },
  });

  const download = () => {
    chartRef.current.download();
  };

  const downloadFixedSize = () => {
    chartRef.current.download({ width: 600, height: 300 });
  };

  const openImage = () => {
    chartRef.current
      .getImageDataURL({ width: 600, height: 300 })
      .then((imageDataURL) => {
        const image = new Image();
        image.src = imageDataURL;
        const tab = window.open(imageDataURL);
        if (tab) {
          tab.document.write(image.outerHTML);
          tab.document.close();
        }
      });
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={download}>Download</button>
          <button onClick={downloadFixedSize}>Download at 600x300</button>
          <button onClick={openImage}>Open</button>
        </div>
      </div>
      <AgCharts ref={chartRef} options={options} />
    </Fragment>
  );
};

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

```

--------------------------------

### Item Styler with Gradient Fill

Source: https://www.ag-grid.com/charts/react/fills-borders

Customizes individual label appearance using a Styler callback. This example applies a gradient fill to labels whose data name starts with 'D'.

```javascript
itemStyler: (params) => {
    if (params.datum.name.startsWith('D')) {
        return {
            /* ... */
            fill: {
                type: 'gradient',
                rotation: 90,
                colorStops: [{ color: '#c56600', stop: 0 }, { color: '#fb9323' }],
            },
        };
    }
}
```

--------------------------------

### AG-Charts React with Annotations

Source: https://www.ag-grid.com/charts/react/events

This example sets up a line chart with initial annotations and configures the annotation toolbar. The 'annotations' event listener logs annotation changes to the console.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AnimationModule,
  AnnotationsModule,
  CategoryAxisModule,
  ChartToolbarModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  AnnotationsModule,
  CategoryAxisModule,
  ChartToolbarModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    title: {
      text: "Monthly Sales Revenue",
    },
    footnote: {
      text: "2024, values in $1000s",
    },
    series: [
      {
        type: "line",
        xKey: "month",
        yKey: "revenue",
        interpolation: { type: "smooth" },
        marker: {
          enabled: false,
        },
      },
    ],
    listeners: {
      annotations: (event) => {
        console.log(event);
      },
    },
    annotations: {
      enabled: true,
      toolbar: {
        buttons: [
          {
            icon: "delete",
            value: "clear",
          },
          {
            icon: "text-annotation",
            value: "text-menu",
          },
        ],
      },
    },
    initialState: {
      annotations: [
        {
          type: "comment",
          x: { value: "Feb", groupPercentage: -0.2 },
          y: 46,
          text: "$45,000",
          fontSize: 12,
        },
        {
          type: "text",
          x: { value: "Jun", groupPercentage: -0.2 },
          y: 81,
          text: "$80,000",
          fontSize: 12,
        },
        {
          type: "note",
          x: "Sep",
          y: 75,
          text: "End of summer dip recovered",
          fontSize: 12,
        },
        {
          type: "callout",
          start: { x: { value: "Dec", groupPercentage: -0.1 }, y: 107 },
          end: { x: "Oct", y: 110 },
          text: "$95,000",
          fontSize: 12,
        },
      ],
    },
  });

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

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

```

--------------------------------

### Funnel Chart Series Configuration

Source: https://www.ag-grid.com/charts/react/key-features

Configure a funnel chart series by specifying its type and the keys for stage and value. This example demonstrates the basic setup for funnel, cone funnel, or pyramid charts.

```javascript
{
    series: [
        {
            type: 'funnel', // or 'cone-funnel' or 'pyramid'
            stageKey: 'stage',
            valueKey: 'value',
        },
    ],
}

```

--------------------------------

### Example of Pattern Configuration

Source: https://www.ag-grid.com/charts/react/fills

Shows a minimal configuration for applying a 'stars' pattern to a series fill. This snippet is useful for understanding the basic structure of pattern configuration.

```javascript
{
    series: [
        {
            fill: {
                type: 'pattern',
                pattern: 'stars',
            },
        },
    ],
}

```

--------------------------------

### Radial Gauge Configuration

Source: https://www.ag-grid.com/charts/react/key-features

Configure a radial gauge with custom value, segmentation, inner radius, scale labels, and bar fill mode. This example demonstrates a comprehensive setup for displaying performance metrics.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

const performanceStages = [
  "VERY POOR",
  "POOR",
  "AVERAGE",
  "GOOD",
  "VERY GOOD",
  "EXCELLENT",
].flatMap((item) => ["", item]);
ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    type: "radial-gauge",

    value: 89,
    segmentation: {
      interval: {
        count: 4,
      },
      spacing: 4,
    },
    innerRadiusRatio: 0.7,
    scale: {
      min: 0,
      max: 100,
      interval: {
        step: 10,
      },
      label: {
        formatter: ({ index }) => {
          return `${performanceStages[index]}`;
        },
      },
    },
    bar: {
      fillMode: "discrete",
    },
    label: {
      fontSize: 20,
    },
    secondaryLabel: {
      text: "Grid Performance",
    },
  });

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

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

```

--------------------------------

### Formatting Axis Labels in AG-Charts React

Source: https://www.ag-grid.com/charts/react/axes-labels

This example shows how to configure static string formats for both time and number axes within an AG-Charts React component. It includes necessary module registrations and component setup.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    series: [
      {
        type: "line",
        xKey: "date",
        yKey: "temp",
      },
    ],
    axes: {
      x: {
        type: "unit-time",
        interval: { step: "month" },
        label: {
          format: "%b %Y",
        },
      },
      y: {
        type: "number",
        label: {
          format: "$#{0>6.2f}",
        },
      },
    },
    data: [
      { date: new Date("2019-01-01"), temp: 82.0 },
      { date: new Date("2019-02-01"), temp: 75.0 },
      { date: new Date("2019-03-01"), temp: 62.0 },
      { date: new Date("2019-04-01"), temp: 99.0 },
      { date: new Date("2019-05-01"), temp: 82.0 },
    ],
  });

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

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

```

--------------------------------

### Configure Toolbar Buttons for Annotations

Source: https://www.ag-grid.com/charts/react/annotations

This example demonstrates how to register necessary modules and configure the annotation toolbar to display only specific buttons like 'delete' and 'text-menu'. It initializes a chart with predefined data and annotations.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AnimationModule,
  AnnotationsModule,
  CategoryAxisModule,
  ChartToolbarModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  AnnotationsModule,
  CategoryAxisModule,
  ChartToolbarModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    title: {
      text: "Monthly Sales Revenue",
    },
    footnote: {
      text: "2024, values in $1000s",
    },
    series: [
      {
        type: "line",
        xKey: "month",
        yKey: "revenue",
        interpolation: { type: "smooth" },
        marker: {
          enabled: false,
        },
      },
    ],
    annotations: {
      enabled: true,
      toolbar: {
        buttons: [
          {
            icon: "delete",
            value: "clear",
          },
          {
            icon: "text-annotation",
            value: "text-menu",
          },
        ],
      },
    },
    initialState: {
      annotations: [
        {
          type: "comment",
          x: { value: "Feb", groupPercentage: -0.2 },
          y: 46,
          text: "$45,000",
          fontSize: 12,
        },
        {
          type: "text",
          x: { value: "Jun", groupPercentage: -0.2 },
          y: 81,
          text: "$80,000",
          fontSize: 12,
        },
        {
          type: "note",
          x: "Sep",
          y: 75,
          text: "End of summer dip recovered",
          fontSize: 12,
        },
        {
          type: "callout",
          start: { x: { value: "Dec", groupPercentage: -0.1 }, y: 107 },
          end: { x: "Oct", y: 110 },
          text: "$95,000",
          fontSize: 12,
        },
      ],
    },
  });

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

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

```

--------------------------------

### Interactive Chart with Fill Type Controls

Source: https://www.ag-grid.com/charts/react/fills

This example demonstrates how to dynamically change the fill type of chart series using buttons. It includes setup for AG-Charts React, data handling, and event listeners for each fill type.

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

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

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "station",
        yKey: "early",
        yName: "Early",
      },
      {
        type: "bar",
        xKey: "station",
        yKey: "morningPeak",
        yName: "Morning peak",
      },
      {
        type: "bar",
        xKey: "station",
        yKey: "interPeak",
        yName: "Between peak",
      },
      {
        type: "bar",
        xKey: "station",
        yKey: "afternoonPeak",
        yName: "Afternoon peak",
      },
      {
        type: "bar",
        xKey: "station",
        yKey: "evening",
        yName: "Evening",
      },
    ],
  });

  const defaultFill = () => {
    const nextOptions = clone(options);

    nextOptions.series?.forEach((series) => {
      series.fill = undefined;
    });

    setOptions(nextOptions);
  };

  const gradientFill = () => {
    const nextOptions = clone(options);

    nextOptions.series?.forEach((series) => {
      series.fill = {
        type: "gradient",
      };
    });

    setOptions(nextOptions);
  };

  const patternFill = () => {
    const nextOptions = clone(options);

    nextOptions.series?.forEach((series) => {
      series.fill = {
        type: "pattern",
      };
    });

    setOptions(nextOptions);
  };

  const imageFill = () => {
    const nextOptions = clone(options);

    nextOptions.series?.forEach((series) => {
      series.fill = {
        type: "image",
        url: "https://www.ag-grid.com/charts/example-assets/docs-images/" + `${series.yKey}.png`,
        backgroundFillOpacity: 0.4,
        width: 30,
        height: 30,
      };
    });

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          Fill Type:
          <button onClick={defaultFill}>Default</button>
          <button onClick={gradientFill}>Gradient</button>
          <button onClick={patternFill}>Pattern</button>
          <button onClick={imageFill}>Image</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

```

--------------------------------

### Customising Legend Item Labels, Markers, and Lines

Source: https://www.ag-grid.com/charts/react/legend

This example shows a complete AG-Charts React setup with extensive legend customisation. It includes data, series configuration, and detailed legend options for item labels, markers, and lines.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    title: { text: "Change in Energy Sources" },
    series: [
      {
        type: "line",
        xKey: "quarter",
        yKey: "naturalGas",
        yName: "Natural gas",
      },
      {
        type: "line",
        xKey: "quarter",
        yKey: "coal",
        yName: "Coal",
      },
      {
        type: "line",
        xKey: "quarter",
        yKey: "primaryOil",
        yName: "Primary oil",
      },
      {
        type: "line",
        xKey: "quarter",
        yKey: "petroleum",
        yName: "Petroleum",
      },
      {
        type: "line",
        xKey: "quarter",
        yKey: "manufacturedFuels",
        yName: "Manufactured fuels",
      },
    ],
    legend: {
      item: {
        label: {
          fontSize: 14,
          fontStyle: "italic",
          fontWeight: "bold",
          fontFamily: "Papyrus",
          color: "red",
          maxLength: 12,
          formatter: ({ value }) => (value == "Coal" ? value + " *" : value),
        },
        marker: {
          size: 20,
          strokeWidth: 3,
          shape: "diamond", // 'circle', 'square', 'cross', 'plus', 'triangle'
        },
        line: {
          strokeWidth: 4,
          length: 40, //20 for the marker and 10 on each side
        },
      },
    },
  });

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

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

```

--------------------------------

### Using Stock Themes

Source: https://www.ag-grid.com/charts/react/themes

Demonstrates how to create a chart and specify a stock theme. The 'ag-default' theme is used by default if no theme is specified.

```javascript
AgCharts.create({
    theme: 'ag-default', // optional, implied
    //...
});
```

--------------------------------

### Line Series with Segmentation

Source: https://www.ag-grid.com/charts/react/style-segments

This example demonstrates how to configure a line series with segmentation to apply different styles to parts of the data. The 'key' property determines which axis to segment along, and 'segments' define the start, stop, and style overrides for each part.

```javascript
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState({
    title: { text: "Performance Variance" },
    data,
    series: [
      {
        type: "line",
        xKey: "date",
        yKey: "value",
        xName: "Date",
        yName: "Value",
        interpolation: {
          type: "smooth",
        },
        segmentation: {
          key: "x",
          segments: [
            {
              start: new Date("2025-01-01"),
              lineDash: [5, 10],
            },
          ],
        },
      },
    ],
    axes: {
      x: { type: "unit-time" },
      y: { type: "number" },
    },
  });

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

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

```

--------------------------------

### AG Charts React Bar Chart with Band Alignment Controls

Source: https://www.ag-grid.com/charts/react/axes-position

This example demonstrates a bar chart in AG Charts React where the band alignment of the x-axis can be dynamically changed. It includes buttons to switch between 'justify', 'start', 'center', and 'end' alignments.

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

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

const ChartExample = () => {
  const [options, setOptions] = useState({
    data: getData(),
    title: {
      text: "Total Visitors to Museums and Galleries",
    },
    footnote: {
      text: "Source: Department for Digital, Culture, Media & Sport",
    },
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "museums",
        yName: "Museums",
        width: 10,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "galleries",
        yName: "Galleries",
        width: 10,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "heritage",
        yName: "Heritage Sites",
        width: 10,
      },
    ],
    axes: {
      x: {
        type: "category",
        bandAlignment: "start",
      },
      y: {
        type: "number",
        title: {
          text: "Total Visitors (Millions)",
        },
      },
    },
    formatter: {
      y(params) {
        const value = params.value;
        const millions = value / 1000000;
        const accuracy = ["series-label", "axis-label"].includes(params.source)
          ? 0
          : 1;
        return `${millions.toFixed(accuracy)}M`;
      },
    },
  });

  const changeBandAlignment = (alignment) => {
    const nextOptions = clone(options);

    nextOptions.axes.x.bandAlignment = alignment;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={() => changeBandAlignment("justify")}>
            Justify
          </button>
          <button onClick={() => changeBandAlignment("start")}>Start</button>
          <button onClick={() => changeBandAlignment("center")}>Center</button>
          <button onClick={() => changeBandAlignment("end")}>End</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

```