---
title: "Stylers"
framework: react
version: "14.1.0"
---

# Stylers

Stylers allow customisation of the visual appearance of specific items or series based on the data or other conditions.

## Item Stylers

An `itemStyler` is a callback function that is called once for each item within the series, and returns style properties for that item.

To change the style of an entire series based on some condition, use a [Series Styler](#series-stylers).

#### Item Styler

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

function lerpColor(t: number, color1: string, color2: string): string {
  const tt = Math.max(0, Math.min(1.5, t)) / 1.5;
  const hexToRgb = (hex: string) => {
    const bigint = parseInt(hex.slice(1), 16);
    return {
      r: (bigint >> 16) & 255,
      g: (bigint >> 8) & 255,
      b: bigint & 255,
    };
  };
  const rgbToHex = (r: number, g: number, b: number) =>
    `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
  const c1 = hexToRgb(color1);
  const c2 = hexToRgb(color2);
  const r = Math.round(c1.r + (c2.r - c1.r) * tt);
  const g = Math.round(c1.g + (c2.g - c1.g) * tt);
  const b = Math.round(c1.b + (c2.b - c1.b) * tt);
  return rgbToHex(r, g, b);
}
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions<DataType>>({
    data: data,
    title: {
      text: "UK Energy Sources",
    },
    subtitle: {
      text: "Source: Department for Business, Energy & Industrial Strategy",
    },
    series: [
      {
        type: "line",
        xKey: "month",
        yKey: "coal",
        yName: "Coal",
        marker: {
          itemStyler: ({ datum: { coal, nuclear }, fill, size }) => {
            return coal > nuclear ? { fill: "#f44", size: 15 } : { fill, size };
          },
        },
        label: {
          itemStyler: ({ datum: { coal, nuclear } }) => {
            if (coal > nuclear) {
              return { fontSize: 12, border: { stroke: "#f44" }, padding: 2 };
            }
            return { fontSize: 8 };
          },
        },
      },
      {
        type: "line",
        xKey: "month",
        yKey: "nuclear",
        yName: "Nuclear",
      },
      {
        type: "bar",
        xKey: "month",
        yKey: "imported",
        yName: "Imported",
        itemStyler: ({ datum, fill, highlightState }) => {
          return {
            fill:
              datum.month === "Jul"
                ? highlightState === "highlighted-item"
                  ? "lime"
                  : "#f44"
                : fill,
          };
        },
        label: {
          itemStyler: ({ datum: { month } }) => {
            return { color: month !== "Jul" ? "transparent" : undefined };
          },
        },
      },
    ],
    axes: {
      y: {
        type: "number",
        interval: { step: 0.2 },
        gridLine: {
          enabled: false,
        },
        max: 2,
        label: {
          format: "#{.1f}%",
          fontWeight: 600,
          itemStyler: (params) => {
            return {
              color: lerpColor(params.value, "#00b347", "#cc2900"),
            };
          },
        },
        title: {
          text: "Normalized Percentage Energy",
        },
      },
    },
  });

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

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

[Live example: Item Styler](https://www.ag-grid.com/charts/reactFunctionalTs/stylers/examples/item-styler)

In this example:

- If the values in the 'Coal' line series are higher than the 'Nuclear' series, the markers and labels are larger and marked in red.
- The 'Imported' series bar for 'Jul' is red with a lime highlight style.
- The y-axis labels are coloured with a gradient scale.

```js
{
    series: [
        {
            type: 'line',
            //...
            marker: {
                itemStyler: ({ datum: { coal, nuclear }, fill, size }) => {
                    return coal > nuclear ? { fill: '#f44', size: 15 } : { fill, size };
                },
            },
            label: {
                itemStyler: ({ datum: { coal, nuclear } }) => {
                    if (coal > nuclear) {
                        return { fontSize: 12, border: { stroke: '#f44' }, padding: 2 };
                    }
                    return { fontSize: 8 };
                },
            },
        },
        {
            type: 'bar',
            //...
            itemStyler: ({ datum, fill, highlightState }) => {
                return {
                    fill:
                        datum.month === 'Jul'
                            ? highlightState === 'highlighted-item'
                                ? 'lime'
                                : '#f44'
                            : fill,
                };
            },
            label: {
                itemStyler: ({ datum: { month } }) => {
                    return { color: month !== 'Jul' ? 'transparent' : undefined };
                },
            },
        },
    ],
    axes: {
        x: {
            //...
            label: {
                itemStyler: (params) => {
                    return { color: lerpColor(params.value, '#00b347', '#cc2900') };
                },
            },
        },
    },
}
```

### Usage

Item Stylers can be found:

- In the `series` object, for customising primitive properties on the series level.
- Inside nested series property objects, such as `marker`.
- Inside series and axes `label` objects.

Each `itemStyler` receives a `params` object containing:

- Relevant details of the item, such as the `datum`, `seriesId`, and `_Keys`.
- The style properties currently applied to the item.
- The [highlight state](https://www.ag-grid.com/charts/react/series-highlighting/#stylers) of the item.
- The [selected and candidate state](https://www.ag-grid.com/charts/react/selection/#candidacy) of the item.

It should return an object containing the styles to be applied to the item.

The exact details differ between the different series types and components which implement the `itemStyler` function.

Please use the [Options Reference](https://www.ag-grid.com/charts/options/) to learn more about Item Stylers, the inputs they receive and the attributes that can be customised.

## Series Stylers

A `styler` is a callback function that is called once for each series and returns style properties. These are most often used within [Theme Overrides](https://www.ag-grid.com/charts/react/themes/#overrides).

#### Series Styler

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

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: { text: "Revenue & Growth vs Benchmark" },
    data: getData(),
    theme: {
      overrides: {
        bar: {
          series: {
            styler: (params) => {
              if (params.yKey.includes("benchmark")) {
                return { fill: "lightgray" };
              }
              return { fill: "#5090DC" };
            },
          },
        },
        line: {
          series: {
            marker: { enabled: false },
            strokeWidth: 4,
            styler: (params) => {
              if (params.yKey.includes("benchmark")) {
                return { stroke: "lightgray" };
              }
              return { stroke: "#5090DC" };
            },
          },
        },
      },
    },
    series: [
      { type: "bar", xKey: "year", yKey: "revenue", yName: "Revenue" },
      {
        type: "bar",
        xKey: "year",
        yKey: "revenue_benchmark",
        yName: "Revenue Benchmark",
      },
      {
        type: "line",
        xKey: "year",
        yKey: "growth",
        yName: "Growth",
        yKeyAxis: "ySecondary",
      },
      {
        type: "line",
        xKey: "year",
        yKey: "growth_benchmark",
        yName: "Growth Benchmark",
        yKeyAxis: "ySecondary",
      },
    ],
    axes: {
      y: {
        type: "number",
        position: "left",
        title: { text: "Revenue (M)" },
        max: 500,
      },
      ySecondary: {
        type: "number",
        position: "right",
        title: { text: "Growth Rate (%)" },
        nice: false,
        max: 0.5,
        min: -0.5,
        label: { formatter: ({ value }) => `${(value * 100).toFixed(0)}%` },
      },
    },
  });

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

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

[Live example: Series Styler](https://www.ag-grid.com/charts/reactFunctionalTs/stylers/examples/series-styler)

In this example:

- Any series containing 'benchmark' in its key is coloured gray, and the other series are blue.
- The legend items also reflect this styling.

```js
{
    theme: {
        overrides: {
            bar: {
                series: {
                    styler: (params) => {
                        if (params.yKey.includes('benchmark')) {
                            return { fill: 'lightgray' };
                        }
                        return { fill: '#5090DC' };
                    },
                },
            },
            line: {
                series: {
                    styler: (params) => {
                        if (params.yKey.includes('benchmark')) {
                            return { stroke: 'lightgray' };
                        }
                        return { stroke: '#5090DC' };
                    },
                },
            },
        },
    },
}
```

### Usage

The series level `styler` is called before the more specific `itemStyler`, with the results of the `styler` being passed into the `itemStyler` params.

Each `styler` receives a `params` object containing:

- Relevant details of the series, such as the `seriesId`, and `_Keys`.
- The style properties currently applied to the series.
- The [highlight state](https://www.ag-grid.com/charts/react/series-highlighting/#stylers) of the series.
- The [selected and candidate state](https://www.ag-grid.com/charts/react/selection/#candidacy) of the series.

It should return an object containing the styles to be applied to the series. Styling of nested property objects other than `marker` must be done with an `itemStyler`.

The exact details differ between the different series types. Please use the [Options Reference](https://www.ag-grid.com/charts/options/) to learn more about Stylers, the inputs they receive and the attributes that can be customised.