JavaScript ChartsFills & Borders

Version 14.2.0

This section describes how to change the fills and borders of chart elements.

main.ts

import {
  AgChartLabelStylerParams,
  AgChartOptions,
  AgCharts,
  BubbleSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { femaleHeightWeight, maleHeightWeight } from "./data";

type DataType = {
  height: number;
  weight: number;
  age: number;
  name: string;
};

ModuleRegistry.registerModules([
  BubbleSeriesModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgChartOptions<DataType> = {
  title: {
    text: "Weight vs Height",
    fill: "#f0f4f9",
    cornerRadius: 8,
    border: {
      enabled: true,
      stroke: "#999",
      strokeWidth: 1,
    },
  },
  subtitle: {
    text: "by gender",
    fill: "#f0f4f9",
    cornerRadius: 8,
  },
  seriesArea: {
    border: {
      stroke: "#999",
      strokeOpacity: 0.75,
      strokeWidth: 3,
    },
    cornerRadius: 8,
    padding: 0,
  },
  legend: {
    position: {
      placement: "top-right",
      floating: true,
      xOffset: -20,
      yOffset: 15,
    },
    fill: "#999",
    fillOpacity: 0.15,
    border: {
      enabled: true,
      stroke: "#999",
      strokeOpacity: 0.5,
    },
    padding: 10,
  },
  series: [
    {
      type: "bubble",
      title: "Male",
      data: maleHeightWeight,
      xKey: "height",
      xName: "Height",
      yKey: "weight",
      yName: "Weight",
      sizeKey: "age",
      sizeName: "Age",
      labelKey: "name",
      labelName: "Name",
      label: {
        cornerRadius: 4,
        fill: "#badaff",
        padding: { top: 4, right: 6, bottom: 4, left: 6 },
        border: {
          enabled: true,
          stroke: "#2c79d5",
          strokeWidth: 1,
        },
        color: "#333",
        itemStyler: (params: AgChartLabelStylerParams<DataType, unknown>) => {
          if (params.datum.name.startsWith("D")) {
            return {
              border: {
                stroke: "#f00",
                strokeWidth: 3,
                strokeOpacity: 1,
              },
              padding: { top: 6, right: 8, bottom: 6, left: 8 },
              fontWeight: "bold",
              color: "#fff",
              fill: {
                type: "gradient",
                rotation: 90,
                colorStops: [
                  { color: "#0052b1", stop: 0 },
                  { color: "#248aff" },
                ],
              },
            };
          } else if (params.datum.name.startsWith("E")) {
            return {
              border: {
                stroke: "#000",
                strokeWidth: 3,
                strokeOpacity: 1,
              },
              padding: { top: 6, right: 8, bottom: 6, left: 8 },
              fontWeight: "bold",
              color: "#000",
              fill: {
                type: "gradient",
                colorStops: [
                  { color: "#248aff", stop: 0 },
                  { color: "#badaff" },
                ],
              },
            };
          }
        },
      },
    },
    {
      type: "bubble",
      title: "Female",
      data: femaleHeightWeight,
      xKey: "height",
      xName: "Height",
      yKey: "weight",
      yName: "Weight",
      sizeKey: "age",
      sizeName: "Age",
      labelKey: "name",
      labelName: "Name",
      label: {
        cornerRadius: 4,
        fill: "#fcc992",
        padding: { top: 4, right: 6, bottom: 4, left: 6 },
        border: {
          enabled: true,
          stroke: "#ea7e04",
          strokeWidth: 1,
        },
        color: "#333",
        itemStyler: (params: AgChartLabelStylerParams<DataType, unknown>) => {
          if (params.datum.name.startsWith("D")) {
            return {
              border: {
                stroke: "#f00",
                strokeWidth: 3,
                strokeOpacity: 1,
              },
              padding: { top: 6, right: 8, bottom: 6, left: 8 },
              fontWeight: "bold",
              color: "#fff",
              fill: {
                type: "gradient",
                rotation: 90,
                colorStops: [
                  { color: "#c56600", stop: 0 },
                  { color: "#fb9323" },
                ],
              },
            };
          } else if (params.datum.name.startsWith("E")) {
            return {
              border: {
                stroke: "#000",
                strokeWidth: 3,
                strokeOpacity: 1,
              },
              padding: { top: 6, right: 8, bottom: 6, left: 8 },
              fontWeight: "bold",
              color: "#000",
              fill: {
                type: "gradient",
                colorStops: [
                  { color: "#fb9323", stop: 0 },
                  { color: "#fcc992" },
                ],
              },
            };
          }
        },
      },
    },
  ],
  axes: {
    x: {
      type: "number",
      title: {
        text: "Height",
      },
      label: {
        fill: "#999",
        fillOpacity: 0.2,
        cornerRadius: 16,
        padding: { top: 4, right: 8, bottom: 4, left: 8 },
        formatter: (params) => {
          return params.value + "cm";
        },
      },
    },
    y: {
      type: "number",
      title: {
        text: "Weight",
      },
      label: {
        fill: "#999",
        fillOpacity: 0.2,
        cornerRadius: 16,
        padding: { top: 4, right: 8, bottom: 4, left: 8 },
        formatter: (params) => {
          return params.value + "kg";
        },
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

In the above example:

A border is drawn around the series area with a corner radius and no padding.
A fill and corner radius are applied to the chart title and subtitle, with a border applied to the title only.
A border, fill and corner radius are applied to the Legend, with padding between the border and items provided as a single number.
A border, fill and corner radius are applied to the series labels and axis labels with padding defined for each of the top, right, bottom and left.
An item styler is used to override the styling of series labels for names starting with the letter 'D' and 'E'.

Fills Copy Link

{
    label: {
        color: '#333', //font colour
        fill: '#badaff', // fill colour
        fillOpacity: 0.8,
    },
}

See Series Fills for details of the available fills types, including patterns and gradients.

Borders Copy Link

{
    border: {
        enabled: true,
        stroke: '#2c79d5',
        strokeWidth: 1,
    },
}

Padding Copy Link

Padding can be defined as a single number to be applied to all sides of the element, or as an object with values for top, right, bottom and left.

{
    padding: 4, //padding of 4px on all sides
}

{
    padding: {
        top: 4,
        right: 6,
        bottom: 2,
        left: 6,
    },
}

Item Styler Copy Link

Individual axis and series labels can be customised using a Styler callback.

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

API Reference Copy Link

Properties available on the AgSeriesAreaOptions interface.

border BorderOptions: The border around the series area.
cornerRadius number: The corner radius of the series area.
padding Padding: Configuration for the padding inside the series area. A number applies uniform padding; an object sets each side.

Represents options for the boxing style on labels.

border BorderOptions: Stroke options for the box border.
cornerRadius PixelSize: Apply rounded corners to the label box.
padding Padding: Distance between the label text and the border. A number applies uniform padding; an object sets each side.
fill AgColorType: The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity: The opacity of the fill colour.

Properties available on the AgChartCaptionOptions interface.

border BorderOptions: Stroke options for the box border.
cornerRadius PixelSize: Apply rounded corners to the label box.
padding Padding: Distance between the label text and the border. A number applies uniform padding; an object sets each side.
fill AgColorType: The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity: The opacity of the fill colour.

Properties available on the AgChartLegendOptions interface.

border BorderOptions: The border around the legend.
cornerRadius PixelSize: The corner radius of the legend.
padding Padding: The padding between the border and legend items. A number applies uniform padding; an object sets each side.
fill AgColorType: The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity: The opacity of the fill colour.

Properties available on the AgGradientLegendOptions interface.

border BorderOptions: The border around the legend.
cornerRadius PixelSize: The corner radius of the legend.
padding Padding: The padding between the border and legend items. A number applies uniform padding; an object sets each side.
fill AgColorType: The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity: The opacity of the fill colour.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges