This section describes how to change the fills and borders of chart elements.
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartLabelStylerParams,
AgChartOptions,
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 ChartExample = () => {
const [options, setOptions] = useState<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";
},
},
},
},
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export const maleHeightWeight = [
{
height: 174,
weight: 65.6,
age: 21,
name: "Liam",
},
{
height: 175.3,
weight: 71.8,
age: 23,
name: "Noah",
},
{
height: 193.5,
weight: 80.7,
age: 28,
name: "Oliver",
},
{
height: 186.5,
weight: 72.6,
age: 23,
name: "William",
},
{
height: 187.2,
weight: 78.8,
age: 22,
name: "Elijah",
},
{
height: 181.5,
weight: 74.8,
age: 21,
name: "James",
},
{
height: 184,
weight: 86.4,
age: 26,
name: "Benjamin",
},
{
height: 184.5,
weight: 78.4,
age: 27,
name: "Lucas",
},
{
height: 175,
weight: 62,
age: 23,
name: "Mason",
},
{
height: 184,
weight: 81.6,
age: 21,
name: "Ethan",
},
{
height: 180,
weight: 76.6,
age: 23,
name: "Alexander",
},
{
height: 177.8,
weight: 83.6,
age: 22,
name: "Henry",
},
{
height: 192,
weight: 90,
age: 20,
name: "Jacob",
},
{
height: 176,
weight: 74.6,
age: 26,
name: "Michael",
},
{
height: 174,
weight: 71,
age: 23,
name: "Daniel",
},
{
height: 184,
weight: 79.6,
age: 22,
name: "Logan",
},
{
height: 192.7,
weight: 93.8,
age: 30,
name: "Jackson",
},
{
height: 171.5,
weight: 70,
age: 22,
name: "Sebastian",
},
{
height: 173,
weight: 72.4,
age: 29,
name: "Jack",
},
{
height: 176,
weight: 85.9,
age: 22,
name: "Aiden",
},
{
height: 176,
weight: 78.8,
age: 22,
name: "Owen",
},
{
height: 180.5,
weight: 77.8,
age: 20,
name: "Samuel",
},
{
height: 172.7,
weight: 66.2,
age: 22,
name: "Matthew",
},
{
height: 176,
weight: 86.4,
age: 24,
name: "Joseph",
},
{
height: 173.5,
weight: 81.8,
age: 26,
name: "Levi",
},
{
height: 178,
weight: 89.6,
age: 24,
name: "Mateo",
},
{
height: 180.3,
weight: 82.8,
age: 21,
name: "David",
},
{
height: 180.3,
weight: 76.4,
age: 24,
name: "John",
},
{
height: 164.5,
weight: 63.2,
age: 23,
name: "Wyatt",
},
{
height: 173,
weight: 60.9,
age: 19,
name: "Carter",
},
{
height: 183.5,
weight: 74.8,
age: 23,
name: "Julian",
},
{
height: 175.5,
weight: 70,
age: 25,
name: "Luke",
},
{
height: 188,
weight: 72.4,
age: 23,
name: "Grayson",
},
{
height: 189.2,
weight: 84.1,
age: 23,
name: "Isaac",
},
{
height: 172.8,
weight: 69.1,
age: 23,
name: "Jayden",
},
{
height: 170,
weight: 59.5,
age: 20,
name: "Theodore",
},
{
height: 182,
weight: 67.2,
age: 22,
name: "Gabriel",
},
{
height: 170,
weight: 61.3,
age: 24,
name: "Anthony",
},
{
height: 177.8,
weight: 68.6,
age: 22,
name: "Dylan",
},
{
height: 184.2,
weight: 80.1,
age: 24,
name: "Leo",
},
{
height: 186.7,
weight: 87.8,
age: 21,
name: "Lincoln",
},
{
height: 171.4,
weight: 84.7,
age: 23,
name: "Jaxon",
},
{
height: 172.7,
weight: 73.4,
age: 24,
name: "Asher",
},
{
height: 175.3,
weight: 72.1,
age: 35,
name: "Christopher",
},
{
height: 180.3,
weight: 82.6,
age: 29,
name: "Josiah",
},
{
height: 182.9,
weight: 88.7,
age: 25,
name: "Andrew",
},
{
height: 188,
weight: 84.1,
age: 23,
name: "Thomas",
},
{
height: 177.2,
weight: 94.1,
age: 20,
name: "Joshua",
},
{
height: 172.1,
weight: 74.9,
age: 25,
name: "Ezra",
},
{
height: 167,
weight: 59.1,
age: 29,
name: "Hudson",
},
{
height: 169.5,
weight: 75.6,
age: 23,
name: "Charles",
},
{
height: 174,
weight: 86.2,
age: 23,
name: "Caleb",
},
{
height: 172.7,
weight: 75.3,
age: 36,
name: "Isaiah",
},
{
height: 182.2,
weight: 87.1,
age: 25,
name: "Ryan",
},
{
height: 164.1,
weight: 55.2,
age: 24,
name: "Nathan",
},
{
height: 163,
weight: 57,
age: 20,
name: "Adrian",
},
{
height: 171.5,
weight: 61.4,
age: 52,
name: "Christian",
},
{
height: 184.2,
weight: 76.8,
age: 50,
name: "Maverick",
},
{
height: 174,
weight: 86.8,
age: 46,
name: "Colton",
},
{
height: 174,
weight: 72.2,
age: 51,
name: "Elias",
},
{
height: 177,
weight: 71.6,
age: 28,
name: "Aaron",
},
{
height: 186,
weight: 84.8,
age: 48,
name: "Eli",
},
{
height: 167,
weight: 68.2,
age: 35,
name: "Landon",
},
{
height: 171.8,
weight: 66.1,
age: 23,
name: "Jonathan",
},
{
height: 182,
weight: 72,
age: 23,
name: "Nolan",
},
{
height: 167,
weight: 64.6,
age: 62,
name: "Hunter",
},
{
height: 177.8,
weight: 74.8,
age: 21,
name: "Cameron",
},
{
height: 164.5,
weight: 70,
age: 26,
name: "Connor",
},
{
height: 192,
weight: 101.6,
age: 33,
name: "Santiago",
},
{
height: 175.5,
weight: 63.2,
age: 36,
name: "Jeremiah",
},
{
height: 171.2,
weight: 79.1,
age: 41,
name: "Ezekiel",
},
{
height: 181.6,
weight: 78.9,
age: 40,
name: "Angel",
},
{
height: 167.4,
weight: 67.7,
age: 27,
name: "Roman",
},
{
height: 181.1,
weight: 66,
age: 27,
name: "Easton",
},
{
height: 177,
weight: 68.2,
age: 23,
name: "Miles",
},
{
height: 174.5,
weight: 63.9,
age: 31,
name: "Robert",
},
{
height: 177.5,
weight: 72,
age: 26,
name: "Jameson",
},
{
height: 170.5,
weight: 56.8,
age: 23,
name: "Nicholas",
},
{
height: 182.4,
weight: 74.5,
age: 24,
name: "Greyson",
},
{
height: 197.1,
weight: 90.9,
age: 24,
name: "Cooper",
},
{
height: 180.1,
weight: 93,
age: 34,
name: "Ian",
},
{
height: 175.5,
weight: 80.9,
age: 21,
name: "Carson",
},
{
height: 180.6,
weight: 72.7,
age: 25,
name: "Axel",
},
{
height: 184.4,
weight: 68,
age: 34,
name: "Jaxson",
},
{
height: 175.5,
weight: 70.9,
age: 31,
name: "Dominic",
},
{
height: 180.6,
weight: 72.5,
age: 40,
name: "Leonardo",
},
{
height: 177,
weight: 72.5,
age: 21,
name: "Luca",
},
{
height: 177.1,
weight: 83.4,
age: 33,
name: "Austin",
},
{
height: 181.6,
weight: 75.5,
age: 25,
name: "Jordan",
},
{
height: 176.5,
weight: 73,
age: 29,
name: "Adam",
},
{
height: 175,
weight: 70.2,
age: 27,
name: "Xavier",
},
{
height: 174,
weight: 73.4,
age: 44,
name: "Jose",
},
{
height: 165.1,
weight: 70.5,
age: 26,
name: "Jace",
},
{
height: 177,
weight: 68.9,
age: 22,
name: "Everett",
},
{
height: 192,
weight: 102.3,
age: 37,
name: "Declan",
},
{
height: 176.5,
weight: 68.4,
age: 38,
name: "Evan",
},
{
height: 169.4,
weight: 65.9,
age: 20,
name: "Kayden",
},
{
height: 182.1,
weight: 75.7,
age: 21,
name: "Parker",
},
{
height: 179.8,
weight: 84.5,
age: 24,
name: "Wesley",
},
{
height: 175.3,
weight: 87.7,
age: 45,
name: "Kai",
},
{
height: 184.9,
weight: 86.4,
age: 25,
name: "Alan",
},
{
height: 177.3,
weight: 73.2,
age: 22,
name: "Allan",
},
{
height: 167.4,
weight: 53.9,
age: 29,
name: "Allen",
},
{
height: 178.1,
weight: 72,
age: 37,
name: "Brian",
},
{
height: 168.9,
weight: 55.5,
age: 20,
name: "Bryan",
},
{
height: 157.2,
weight: 58.4,
age: 20,
name: "Cole",
},
{
height: 180.3,
weight: 83.2,
age: 32,
name: "Colin",
},
{
height: 170.2,
weight: 72.7,
age: 23,
name: "Collin",
},
{
height: 177.8,
weight: 64.1,
age: 25,
name: "Conner",
},
{
height: 172.7,
weight: 72.3,
age: 27,
name: "Conor",
},
{
height: 165.1,
weight: 65,
age: 21,
name: "Corey",
},
{
height: 186.7,
weight: 86.4,
age: 27,
name: "Cory",
},
{
height: 165.1,
weight: 65,
age: 25,
name: "Damian",
},
{
height: 174,
weight: 88.6,
age: 38,
name: "Damien",
},
{
height: 175.3,
weight: 84.1,
age: 44,
name: "Damon",
},
{
height: 185.4,
weight: 66.8,
age: 27,
name: "Derek",
},
{
height: 177.8,
weight: 75.5,
age: 37,
name: "Derrick",
},
{
height: 180.3,
weight: 93.2,
age: 28,
name: "Devin",
},
{
height: 180.3,
weight: 82.7,
age: 33,
name: "Devon",
},
{
height: 177.8,
weight: 58,
age: 25,
name: "Dilan",
},
{
height: 177.8,
weight: 79.5,
age: 21,
name: "Dillon",
},
{
height: 177.8,
weight: 78.6,
age: 30,
name: "Dominick",
},
{
height: 177.8,
weight: 71.8,
age: 26,
name: "Dominik",
},
{
height: 177.8,
weight: 110.4,
age: 27,
name: "Donovan",
},
{
height: 163.8,
weight: 72.2,
age: 33,
name: "Dorian",
},
{
height: 188,
weight: 83.6,
age: 29,
name: "Douglas",
},
{
height: 198.1,
weight: 85.5,
age: 27,
name: "Drake",
},
{
height: 175.3,
weight: 90.9,
age: 34,
name: "Duke",
},
{
height: 166.4,
weight: 85.9,
age: 42,
name: "Dustin",
},
{
height: 190.5,
weight: 89.1,
age: 29,
name: "Eric",
},
{
height: 166.4,
weight: 75,
age: 41,
name: "Erick",
},
{
height: 177.8,
weight: 77.7,
age: 43,
name: "Erik",
},
{
height: 179.7,
weight: 86.4,
age: 43,
name: "Gary",
},
{
height: 172.7,
weight: 90.9,
age: 29,
name: "Gavin",
},
{
height: 190.5,
weight: 73.6,
age: 27,
name: "Gunnar",
},
{
height: 185.4,
weight: 76.4,
age: 62,
name: "Gunner",
},
{
height: 168.9,
weight: 69.1,
age: 33,
name: "Jared",
},
{
height: 167.6,
weight: 84.5,
age: 45,
name: "Jason",
},
{
height: 175.3,
weight: 64.5,
age: 30,
name: "Jefferson",
},
{
height: 170.2,
weight: 69.1,
age: 20,
name: "Jeffrey",
},
{
height: 190.5,
weight: 108.6,
age: 22,
name: "Jeremy",
},
{
height: 177.8,
weight: 86.4,
age: 51,
name: "Joel",
},
{
height: 190.5,
weight: 80.9,
age: 34,
name: "Justin",
},
{
height: 177.8,
weight: 87.7,
age: 44,
name: "Keith",
},
{
height: 184.2,
weight: 94.5,
age: 46,
name: "Kenneth",
},
{
height: 176.5,
weight: 80.2,
age: 34,
name: "Kevin",
},
{
height: 177.8,
weight: 72,
age: 32,
name: "Kieran",
},
{
height: 180.3,
weight: 71.4,
age: 28,
name: "Kingsley",
},
{
height: 171.4,
weight: 72.7,
age: 31,
name: "Kyle",
},
{
height: 172.7,
weight: 84.1,
age: 29,
name: "Marc",
},
{
height: 172.7,
weight: 76.8,
age: 42,
name: "Mark",
},
{
height: 177.8,
weight: 63.6,
age: 29,
name: "Mathew",
},
{
height: 177.8,
weight: 80.9,
age: 31,
name: "Mitchell",
},
{
height: 182.9,
weight: 80.9,
age: 30,
name: "Morgan",
},
{
height: 170.2,
weight: 85.5,
age: 27,
name: "Nelson",
},
{
height: 167.6,
weight: 68.6,
age: 25,
name: "Nicolas",
},
{
height: 175.3,
weight: 67.7,
age: 24,
name: "Noel",
},
{
height: 165.1,
weight: 66.4,
age: 33,
name: "Rhett",
},
{
height: 185.4,
weight: 102.3,
age: 45,
name: "Rhys",
},
{
height: 181.6,
weight: 70.5,
age: 37,
name: "Riley",
},
{
height: 172.7,
weight: 95.9,
age: 44,
name: "Robin",
},
{
height: 190.5,
weight: 84.1,
age: 34,
name: "Scott",
},
{
height: 179.1,
weight: 87.3,
age: 55,
name: "Abdullah",
},
{
height: 175.3,
weight: 71.8,
age: 43,
name: "Abraham",
},
{
height: 170.2,
weight: 65.9,
age: 24,
name: "Abram",
},
{
height: 193,
weight: 95.9,
age: 22,
name: "Ahmad",
},
{
height: 171.4,
weight: 91.4,
age: 38,
name: "Ahmed",
},
{
height: 177.8,
weight: 81.8,
age: 24,
name: "Albert",
},
{
height: 177.8,
weight: 96.8,
age: 29,
name: "Alfred",
},
{
height: 167.6,
weight: 69.1,
age: 25,
name: "Alistair",
},
{
height: 167.6,
weight: 82.7,
age: 37,
name: "Ambrose",
},
{
height: 180.3,
weight: 75.5,
age: 30,
name: "Arthur",
},
{
height: 182.9,
weight: 79.5,
age: 26,
name: "Asa",
},
{
height: 176.5,
weight: 73.6,
age: 35,
name: "Atticus",
},
{
height: 186.7,
weight: 91.8,
age: 29,
name: "Calvin",
},
{
height: 188,
weight: 84.1,
age: 30,
name: "Carl",
},
{
height: 188,
weight: 85.9,
age: 37,
name: "Curtis",
},
{
height: 177.8,
weight: 81.8,
age: 34,
name: "Cyrus",
},
{
height: 174,
weight: 82.5,
age: 28,
name: "Dennis",
},
{
height: 177.8,
weight: 80.5,
age: 27,
name: "Desmond",
},
{
height: 171.4,
weight: 70,
age: 32,
name: "Dexter",
},
{
height: 185.4,
weight: 81.8,
age: 28,
name: "Donald",
},
{
height: 185.4,
weight: 84.1,
age: 22,
name: "Edgar",
},
{
height: 188,
weight: 90.5,
age: 44,
name: "Edward",
},
{
height: 188,
weight: 91.4,
age: 25,
name: "Edwin",
},
{
height: 182.9,
weight: 89.1,
age: 49,
name: "Eithan",
},
{
height: 176.5,
weight: 85,
age: 54,
name: "Elliot",
},
{
height: 175.3,
weight: 69.1,
age: 49,
name: "Elliott",
},
{
height: 175.3,
weight: 73.6,
age: 60,
name: "Emanuel",
},
{
height: 188,
weight: 80.5,
age: 42,
name: "Emmanuel",
},
{
height: 188,
weight: 82.7,
age: 52,
name: "Emmett",
},
{
height: 175.3,
weight: 86.4,
age: 23,
name: "Emmitt",
},
{
height: 170.5,
weight: 67.7,
age: 33,
name: "Eugene",
},
{
height: 179.1,
weight: 92.7,
age: 46,
name: "Felix",
},
{
height: 177.8,
weight: 93.6,
age: 43,
name: "Francis",
},
{
height: 175.3,
weight: 70.9,
age: 56,
name: "Frank",
},
{
height: 182.9,
weight: 75,
age: 21,
name: "Franklin",
},
{
height: 170.8,
weight: 93.2,
age: 18,
name: "Frederick",
},
{
height: 188,
weight: 93.2,
age: 21,
name: "George",
},
{
height: 180.3,
weight: 77.7,
age: 45,
name: "Gerald",
},
{
height: 177.8,
weight: 61.4,
age: 22,
name: "Gideon",
},
{
height: 185.4,
weight: 94.1,
age: 55,
name: "Gordon",
},
{
height: 168.9,
weight: 75,
age: 42,
name: "Graham",
},
{
height: 185.4,
weight: 83.6,
age: 29,
name: "Grant",
},
{
height: 180.3,
weight: 85.5,
age: 40,
name: "Graysen",
},
{
height: 174,
weight: 73.9,
age: 24,
name: "Gregory",
},
{
height: 167.6,
weight: 66.8,
age: 62,
name: "Hank",
},
{
height: 182.9,
weight: 87.3,
age: 26,
name: "Harold",
},
{
height: 160,
weight: 72.3,
age: 35,
name: "Harrison",
},
{
height: 180.3,
weight: 88.6,
age: 37,
name: "Harvey",
},
{
height: 167.6,
weight: 75.5,
age: 34,
name: "Hector",
},
{
height: 186.7,
weight: 101.4,
age: 25,
name: "Howard",
},
{
height: 175.3,
weight: 91.1,
age: 30,
name: "Hugh",
},
{
height: 175.3,
weight: 67.3,
age: 32,
name: "Ibrahim",
},
{
height: 175.9,
weight: 77.7,
age: 27,
name: "Ira",
},
{
height: 175.3,
weight: 81.8,
age: 42,
name: "Ismael",
},
{
height: 179.1,
weight: 75.5,
age: 44,
name: "Israel",
},
{
height: 181.6,
weight: 84.5,
age: 46,
name: "Jericho",
},
{
height: 177.8,
weight: 76.6,
age: 19,
name: "Jermaine",
},
{
height: 182.9,
weight: 85,
age: 43,
name: "Jerome",
},
{
height: 177.8,
weight: 102.5,
age: 28,
name: "Jonas",
},
{
height: 184.2,
weight: 77.3,
age: 39,
name: "Judah",
},
{
height: 179.1,
weight: 71.8,
age: 30,
name: "Jude",
},
{
height: 176.5,
weight: 87.9,
age: 36,
name: "Kareem",
},
{
height: 188,
weight: 94.3,
age: 48,
name: "Lance",
},
{
height: 174,
weight: 70.9,
age: 48,
name: "Langston",
},
{
height: 167.6,
weight: 64.5,
age: 53,
name: "Larry",
},
{
height: 170.2,
weight: 77.3,
age: 45,
name: "Lawrence",
},
{
height: 167.6,
weight: 72.3,
age: 39,
name: "Leland",
},
{
height: 188,
weight: 87.3,
age: 43,
name: "Leonard",
},
{
height: 174,
weight: 80,
age: 65,
name: "Leroy",
},
{
height: 176.5,
weight: 82.3,
age: 45,
name: "Lewis",
},
{
height: 180.3,
weight: 73.6,
age: 37,
name: "Lionel",
},
{
height: 167.6,
weight: 74.1,
age: 55,
name: "Louis",
},
{
height: 188,
weight: 85.9,
age: 33,
name: "Lucian",
},
{
height: 180.3,
weight: 73.2,
age: 25,
name: "Luis",
},
{
height: 167.6,
weight: 76.3,
age: 35,
name: "Lukas",
},
{
height: 183,
weight: 65.9,
age: 28,
name: "Lyle",
},
{
height: 183,
weight: 90.9,
age: 26,
name: "Malachi",
},
{
height: 179.1,
weight: 89.1,
age: 43,
name: "Malcolm",
},
{
height: 170.2,
weight: 62.3,
age: 30,
name: "Marshall",
},
{
height: 177.8,
weight: 82.7,
age: 26,
name: "Martin",
},
{
height: 179.1,
weight: 79.1,
age: 51,
name: "Marvin",
},
{
height: 190.5,
weight: 98.2,
age: 30,
name: "Mathias",
},
{
height: 177.8,
weight: 84.1,
age: 24,
name: "Matias",
},
{
height: 180.3,
weight: 83.2,
age: 35,
name: "Matthias",
},
{
height: 180.3,
weight: 83.2,
age: 37,
name: "Maxwell",
},
];
export const femaleHeightWeight = [
{
height: 161.2,
weight: 51.6,
age: 22,
name: "Olivia",
},
{
height: 167.5,
weight: 59,
age: 20,
name: "Emma",
},
{
height: 159.5,
weight: 49.2,
age: 19,
name: "Ava",
},
{
height: 157,
weight: 63,
age: 25,
name: "Sophia",
},
{
height: 155.8,
weight: 53.6,
age: 21,
name: "Isabella",
},
{
height: 170,
weight: 59,
age: 23,
name: "Charlotte",
},
{
height: 159.1,
weight: 47.6,
age: 26,
name: "Amelia",
},
{
height: 166,
weight: 69.8,
age: 22,
name: "Mia",
},
{
height: 176.2,
weight: 66.8,
age: 28,
name: "Harper",
},
{
height: 160.2,
weight: 75.2,
age: 40,
name: "Evelyn",
},
{
height: 172.5,
weight: 55.2,
age: 32,
name: "Abigail",
},
{
height: 170.9,
weight: 54.2,
age: 25,
name: "Emily",
},
{
height: 172.9,
weight: 62.5,
age: 25,
name: "Ella",
},
{
height: 153.4,
weight: 42,
age: 29,
name: "Elizabeth",
},
{
height: 160,
weight: 50,
age: 22,
name: "Camila",
},
{
height: 147.2,
weight: 49.8,
age: 25,
name: "Luna",
},
{
height: 168.2,
weight: 49.2,
age: 23,
name: "Sofia",
},
{
height: 175,
weight: 73.2,
age: 37,
name: "Avery",
},
{
height: 157,
weight: 47.8,
age: 19,
name: "Mila",
},
{
height: 167.6,
weight: 68.8,
age: 23,
name: "Aria",
},
{
height: 159.5,
weight: 50.6,
age: 25,
name: "Scarlett",
},
{
height: 175,
weight: 82.5,
age: 26,
name: "Penelope",
},
{
height: 166.8,
weight: 57.2,
age: 24,
name: "Layla",
},
{
height: 176.5,
weight: 87.8,
age: 29,
name: "Chloe",
},
{
height: 170.2,
weight: 72.8,
age: 22,
name: "Victoria",
},
{
height: 174,
weight: 54.5,
age: 30,
name: "Madison",
},
{
height: 173,
weight: 59.8,
age: 23,
name: "Eleanor",
},
{
height: 179.9,
weight: 67.3,
age: 38,
name: "Grace",
},
{
height: 170.5,
weight: 67.8,
age: 23,
name: "Nora",
},
{
height: 160,
weight: 47,
age: 19,
name: "Riley",
},
{
height: 154.4,
weight: 46.2,
age: 46,
name: "Zoey",
},
{
height: 162,
weight: 55,
age: 20,
name: "Hannah",
},
{
height: 176.5,
weight: 83,
age: 22,
name: "Hazel",
},
{
height: 160,
weight: 54.4,
age: 25,
name: "Lily",
},
{
height: 152,
weight: 45.8,
age: 21,
name: "Ellie",
},
{
height: 162.1,
weight: 53.6,
age: 23,
name: "Violet",
},
{
height: 170,
weight: 73.2,
age: 31,
name: "Lillian",
},
{
height: 160.2,
weight: 52.1,
age: 29,
name: "Zoe",
},
{
height: 161.3,
weight: 67.9,
age: 19,
name: "Stella",
},
{
height: 166.4,
weight: 56.6,
age: 21,
name: "Aurora",
},
{
height: 168.9,
weight: 62.3,
age: 23,
name: "Natalie",
},
{
height: 163.8,
weight: 58.5,
age: 24,
name: "Emilia",
},
{
height: 167.6,
weight: 54.5,
age: 20,
name: "Everly",
},
{
height: 160,
weight: 50.2,
age: 19,
name: "Leah",
},
{
height: 161.3,
weight: 60.3,
age: 20,
name: "Aubrey",
},
{
height: 167.6,
weight: 58.3,
age: 19,
name: "Willow",
},
{
height: 165.1,
weight: 56.2,
age: 20,
name: "Addison",
},
{
height: 160,
weight: 50.2,
age: 19,
name: "Lucy",
},
{
height: 170,
weight: 72.9,
age: 22,
name: "Audrey",
},
{
height: 157.5,
weight: 59.8,
age: 39,
name: "Bella",
},
{
height: 167.6,
weight: 61,
age: 18,
name: "Nova",
},
{
height: 160.7,
weight: 69.1,
age: 19,
name: "Brooklyn",
},
{
height: 163.2,
weight: 55.9,
age: 26,
name: "Paisley",
},
{
height: 152.4,
weight: 46.5,
age: 20,
name: "Savannah",
},
{
height: 157.5,
weight: 54.3,
age: 20,
name: "Claire",
},
{
height: 168.3,
weight: 54.8,
age: 26,
name: "Skylar",
},
{
height: 180.3,
weight: 60.7,
age: 21,
name: "Isla",
},
{
height: 165.5,
weight: 60,
age: 21,
name: "Genesis",
},
{
height: 165,
weight: 62,
age: 38,
name: "Naomi",
},
{
height: 164.5,
weight: 60.3,
age: 23,
name: "Elena",
},
{
height: 156,
weight: 52.7,
age: 37,
name: "Caroline",
},
{
height: 160,
weight: 74.3,
age: 19,
name: "Eliana",
},
{
height: 163,
weight: 62,
age: 25,
name: "Anna",
},
{
height: 165.7,
weight: 73.1,
age: 20,
name: "Maya",
},
{
height: 161,
weight: 80,
age: 41,
name: "Valentina",
},
{
height: 162,
weight: 54.7,
age: 26,
name: "Ruby",
},
{
height: 166,
weight: 53.2,
age: 21,
name: "Kennedy",
},
{
height: 174,
weight: 75.7,
age: 47,
name: "Ivy",
},
{
height: 172.7,
weight: 61.1,
age: 19,
name: "Ariana",
},
{
height: 167.6,
weight: 55.7,
age: 44,
name: "Aaliyah",
},
{
height: 151.1,
weight: 48.7,
age: 35,
name: "Cora",
},
{
height: 164.5,
weight: 52.3,
age: 32,
name: "Madelyn",
},
{
height: 163.5,
weight: 50,
age: 46,
name: "Alice",
},
{
height: 152,
weight: 59.3,
age: 22,
name: "Kinsley",
},
{
height: 169,
weight: 62.5,
age: 49,
name: "Hailey",
},
{
height: 164,
weight: 55.7,
age: 52,
name: "Gabriella",
},
{
height: 161.2,
weight: 54.8,
age: 25,
name: "Allison",
},
{
height: 155,
weight: 45.9,
age: 48,
name: "Gianna",
},
{
height: 170,
weight: 70.6,
age: 41,
name: "Serenity",
},
{
height: 176.2,
weight: 67.2,
age: 18,
name: "Samantha",
},
{
height: 170,
weight: 69.4,
age: 30,
name: "Sarah",
},
{
height: 162.5,
weight: 58.2,
age: 20,
name: "Autumn",
},
{
height: 170.3,
weight: 64.8,
age: 24,
name: "Quinn",
},
{
height: 164.1,
weight: 71.6,
age: 23,
name: "Eva",
},
{
height: 169.5,
weight: 52.8,
age: 30,
name: "Piper",
},
{
height: 163.2,
weight: 59.8,
age: 23,
name: "Sophie",
},
{
height: 154.5,
weight: 49,
age: 45,
name: "Sadie",
},
{
height: 159.8,
weight: 50,
age: 20,
name: "Delilah",
},
{
height: 173.2,
weight: 69.2,
age: 20,
name: "Josephine",
},
{
height: 170,
weight: 55.9,
age: 23,
name: "Nevaeh",
},
{
height: 161.4,
weight: 63.4,
age: 21,
name: "Adeline",
},
{
height: 169,
weight: 58.2,
age: 28,
name: "Arya",
},
{
height: 166.2,
weight: 58.6,
age: 45,
name: "Emery",
},
{
height: 159.4,
weight: 45.7,
age: 24,
name: "Lydia",
},
{
height: 162.5,
weight: 52.2,
age: 25,
name: "Clara",
},
{
height: 159,
weight: 48.6,
age: 19,
name: "Vivian",
},
{
height: 162.8,
weight: 57.8,
age: 20,
name: "Madeline",
},
{
height: 159,
weight: 55.6,
age: 29,
name: "Peyton",
},
{
height: 179.8,
weight: 66.8,
age: 24,
name: "Julia",
},
{
height: 162.9,
weight: 59.4,
age: 24,
name: "Rylee",
},
{
height: 161,
weight: 53.6,
age: 25,
name: "Adele",
},
{
height: 151.1,
weight: 73.2,
age: 31,
name: "Adriana",
},
{
height: 168.2,
weight: 53.4,
age: 22,
name: "Adrianna",
},
{
height: 168.9,
weight: 69,
age: 20,
name: "Alexa",
},
{
height: 173.2,
weight: 58.4,
age: 32,
name: "Alexandra",
},
{
height: 171.8,
weight: 56.2,
age: 25,
name: "Alicia",
},
{
height: 178,
weight: 70.6,
age: 19,
name: "Alison",
},
{
height: 164.3,
weight: 59.8,
age: 23,
name: "Amanda",
},
{
height: 163,
weight: 72,
age: 22,
name: "Amy",
},
{
height: 168.5,
weight: 65.2,
age: 20,
name: "Andrea",
},
{
height: 166.8,
weight: 56.6,
age: 27,
name: "Angela",
},
{
height: 172.7,
weight: 105.2,
age: 34,
name: "Angelica",
},
{
height: 163.5,
weight: 51.8,
age: 25,
name: "Ashley",
},
{
height: 169.4,
weight: 63.4,
age: 26,
name: "Bethany",
},
{
height: 167.8,
weight: 59,
age: 19,
name: "Bianca",
},
{
height: 159.5,
weight: 47.6,
age: 26,
name: "Bridget",
},
{
height: 167.6,
weight: 63,
age: 25,
name: "Brittany",
},
{
height: 161.2,
weight: 55.2,
age: 20,
name: "Brooke",
},
{
height: 160,
weight: 45,
age: 21,
name: "Carly",
},
{
height: 163.2,
weight: 54,
age: 18,
name: "Catalina",
},
{
height: 162.2,
weight: 50.2,
age: 19,
name: "Catherine",
},
{
height: 161.3,
weight: 60.2,
age: 27,
name: "Christina",
},
{
height: 149.5,
weight: 44.8,
age: 26,
name: "Christine",
},
{
height: 157.5,
weight: 58.8,
age: 36,
name: "Clarissa",
},
{
height: 163.2,
weight: 56.4,
age: 20,
name: "Cynthia",
},
{
height: 172.7,
weight: 62,
age: 28,
name: "Dana",
},
{
height: 155,
weight: 49.2,
age: 32,
name: "Danielle",
},
{
height: 156.5,
weight: 67.2,
age: 32,
name: "Diana",
},
{
height: 164,
weight: 53.8,
age: 23,
name: "Eden",
},
{
height: 160.9,
weight: 54.4,
age: 20,
name: "Eileen",
},
{
height: 162.8,
weight: 58,
age: 20,
name: "Elisabeth",
},
{
height: 167,
weight: 59.8,
age: 20,
name: "Elise",
},
{
height: 160,
weight: 54.8,
age: 23,
name: "Elle",
},
{
height: 160,
weight: 43.2,
age: 20,
name: "Ellen",
},
{
height: 168.9,
weight: 60.5,
age: 28,
name: "Erin",
},
{
height: 158.2,
weight: 46.4,
age: 23,
name: "Eve",
},
{
height: 156,
weight: 64.4,
age: 19,
name: "Gabrielle",
},
{
height: 160,
weight: 48.8,
age: 28,
name: "Hope",
},
{
height: 167.1,
weight: 62.2,
age: 19,
name: "Ingrid",
},
{
height: 158,
weight: 55.5,
age: 29,
name: "Irene",
},
{
height: 167.6,
weight: 57.8,
age: 32,
name: "Isabel",
},
{
height: 156,
weight: 54.6,
age: 20,
name: "Isabela",
},
{
height: 162.1,
weight: 59.2,
age: 28,
name: "Isabelle",
},
{
height: 173.4,
weight: 52.7,
age: 36,
name: "Jennifer",
},
{
height: 159.8,
weight: 53.2,
age: 22,
name: "Jessica",
},
{
height: 170.5,
weight: 64.5,
age: 20,
name: "Jillian",
},
{
height: 159.2,
weight: 51.8,
age: 22,
name: "Joanna",
},
{
height: 157.5,
weight: 56,
age: 32,
name: "Jocelyn",
},
{
height: 161.3,
weight: 63.6,
age: 40,
name: "Johanna",
},
{
height: 162.6,
weight: 63.2,
age: 40,
name: "Juliana",
},
{
height: 160,
weight: 59.5,
age: 42,
name: "Julie",
},
{
height: 168.9,
weight: 56.8,
age: 40,
name: "Karen",
},
{
height: 165.1,
weight: 64.1,
age: 44,
name: "Katherine",
},
{
height: 162.6,
weight: 50,
age: 30,
name: "Kathleen",
},
{
height: 165.1,
weight: 72.3,
age: 28,
name: "Kayla",
},
{
height: 166.4,
weight: 55,
age: 37,
name: "Kelly",
},
{
height: 160,
weight: 55.9,
age: 40,
name: "Kendra",
},
{
height: 152.4,
weight: 60.4,
age: 45,
name: "Kimber",
},
{
height: 170.2,
weight: 69.1,
age: 35,
name: "Kimberly",
},
{
height: 162.6,
weight: 84.5,
age: 41,
name: "Laila",
},
{
height: 170.2,
weight: 55.9,
age: 27,
name: "Laura",
},
{
height: 158.8,
weight: 55.5,
age: 20,
name: "Lauren",
},
{
height: 172.7,
weight: 69.5,
age: 24,
name: "Leslie",
},
{
height: 167.6,
weight: 76.4,
age: 36,
name: "Lila",
},
{
height: 162.6,
weight: 61.4,
age: 27,
name: "Linda",
},
{
height: 167.6,
weight: 65.9,
age: 32,
name: "Lindsey",
},
{
height: 156.2,
weight: 58.6,
age: 64,
name: "Lisa",
},
{
height: 175.2,
weight: 66.8,
age: 21,
name: "Livia",
},
{
height: 172.1,
weight: 56.6,
age: 32,
name: "Lyla",
},
{
height: 162.6,
weight: 58.6,
age: 35,
name: "Madeleine",
},
{
height: 160,
weight: 55.9,
age: 41,
name: "Maeve",
},
{
height: 165.1,
weight: 59.1,
age: 40,
name: "Marina",
},
{
height: 182.9,
weight: 81.8,
age: 29,
name: "Megan",
},
{
height: 166.4,
weight: 70.7,
age: 40,
name: "Meghan",
},
{
height: 165.1,
weight: 56.8,
age: 24,
name: "Melanie",
},
{
height: 177.8,
weight: 60,
age: 23,
name: "Melissa",
},
{
height: 165.1,
weight: 58.2,
age: 41,
name: "Meredith",
},
{
height: 175.3,
weight: 72.7,
age: 44,
name: "Michelle",
},
{
height: 154.9,
weight: 54.1,
age: 53,
name: "Miranda",
},
{
height: 158.8,
weight: 49.1,
age: 19,
name: "Monica",
},
{
height: 172.7,
weight: 75.9,
age: 24,
name: "Mya",
},
{
height: 168.9,
weight: 55,
age: 25,
name: "Nadia",
},
{
height: 161.3,
weight: 57.3,
age: 20,
name: "Natasha",
},
{
height: 167.6,
weight: 55,
age: 34,
name: "Nathalie",
},
{
height: 165.1,
weight: 65.5,
age: 32,
name: "Nicole",
},
{
height: 175.3,
weight: 65.5,
age: 24,
name: "Noelle",
},
{
height: 157.5,
weight: 48.6,
age: 29,
name: "Paige",
},
{
height: 163.8,
weight: 58.6,
age: 31,
name: "Patricia",
},
{
height: 167.6,
weight: 63.6,
age: 34,
name: "Rachel",
},
{
height: 165.1,
weight: 55.2,
age: 36,
name: "Rebecca",
},
{
height: 165.1,
weight: 62.7,
age: 32,
name: "Reese",
},
{
height: 168.9,
weight: 56.6,
age: 39,
name: "Renee",
},
{
height: 162.6,
weight: 53.9,
age: 37,
name: "Ryan",
},
{
height: 164.5,
weight: 63.2,
age: 52,
name: "Sandra",
},
{
height: 176.5,
weight: 73.6,
age: 24,
name: "Stephanie",
},
{
height: 168.9,
weight: 62,
age: 33,
name: "Tiffany",
},
{
height: 175.3,
weight: 63.6,
age: 42,
name: "Valerie",
},
{
height: 159.4,
weight: 53.2,
age: 34,
name: "Vanessa",
},
{
height: 160,
weight: 53.4,
age: 37,
name: "Veronica",
},
{
height: 170.2,
weight: 55,
age: 39,
name: "Whitney",
},
{
height: 162.6,
weight: 70.5,
age: 41,
name: "Ada",
},
{
height: 167.6,
weight: 54.5,
age: 36,
name: "Adaline",
},
{
height: 162.6,
weight: 54.5,
age: 19,
name: "Adelaide",
},
{
height: 160.7,
weight: 55.9,
age: 22,
name: "Amalia",
},
{
height: 160,
weight: 59,
age: 23,
name: "Ann",
},
{
height: 157.5,
weight: 63.6,
age: 36,
name: "Anne",
},
{
height: 162.6,
weight: 54.5,
age: 45,
name: "Antonella",
},
{
height: 152.4,
weight: 47.3,
age: 25,
name: "Arlette",
},
{
height: 170.2,
weight: 67.7,
age: 67,
name: "Astrid",
},
{
height: 165.1,
weight: 80.9,
age: 26,
name: "Barbara",
},
{
height: 172.7,
weight: 70.5,
age: 21,
name: "Beatrice",
},
{
height: 165.1,
weight: 60.9,
age: 33,
name: "Camilla",
},
{
height: 170.2,
weight: 63.6,
age: 25,
name: "Camille",
},
{
height: 170.2,
weight: 54.5,
age: 24,
name: "Carmen",
},
{
height: 170.2,
weight: 59.1,
age: 21,
name: "Carolina",
},
{
height: 161.3,
weight: 70.5,
age: 35,
name: "Carolyn",
},
{
height: 167.6,
weight: 52.7,
age: 27,
name: "Cassandra",
},
{
height: 167.6,
weight: 62.7,
age: 27,
name: "Cecilia",
},
{
height: 165.1,
weight: 86.3,
age: 26,
name: "Celeste",
},
{
height: 162.6,
weight: 66.4,
age: 25,
name: "Clare",
},
{
height: 152.4,
weight: 67.3,
age: 44,
name: "Colette",
},
{
height: 168.9,
weight: 63,
age: 29,
name: "Coraline",
},
{
height: 170.2,
weight: 73.6,
age: 26,
name: "Corinne",
},
{
height: 175.2,
weight: 62.3,
age: 23,
name: "Deborah",
},
{
height: 175.2,
weight: 57.7,
age: 32,
name: "Dorothy",
},
{
height: 160,
weight: 55.4,
age: 32,
name: "Edith",
},
{
height: 165.1,
weight: 104.1,
age: 43,
name: "Elaine",
},
{
height: 174,
weight: 55.5,
age: 32,
name: "Eloise",
},
{
height: 170.2,
weight: 77.3,
age: 41,
name: "Esmeralda",
},
{
height: 160,
weight: 80.5,
age: 33,
name: "Estella",
},
{
height: 167.6,
weight: 64.5,
age: 28,
name: "Estelle",
},
{
height: 167.6,
weight: 72.3,
age: 28,
name: "Esther",
},
{
height: 167.6,
weight: 61.4,
age: 25,
name: "Evangeline",
},
{
height: 154.9,
weight: 58.2,
age: 38,
name: "Faye",
},
{
height: 162.6,
weight: 81.8,
age: 37,
name: "Fiona",
},
{
height: 175.3,
weight: 63.6,
age: 25,
name: "Frances",
},
{
height: 171.4,
weight: 53.4,
age: 37,
name: "Frida",
},
{
height: 157.5,
weight: 54.5,
age: 27,
name: "Gabriela",
},
{
height: 165.1,
weight: 53.6,
age: 27,
name: "Gemma",
},
{
height: 160,
weight: 60,
age: 20,
name: "Georgia",
},
{
height: 174,
weight: 73.6,
age: 19,
name: "Giselle",
},
{
height: 162.6,
weight: 61.4,
age: 32,
name: "Gloria",
},
{
height: 174,
weight: 55.5,
age: 26,
name: "Greta",
},
{
height: 162.6,
weight: 63.6,
age: 56,
name: "Gwendolyn",
},
{
height: 161.3,
weight: 60.9,
age: 23,
name: "Hanna",
},
{
height: 156.2,
weight: 60,
age: 19,
name: "Harriet",
},
{
height: 149.9,
weight: 46.8,
age: 31,
name: "Helen",
},
{
height: 169.5,
weight: 57.3,
age: 34,
name: "Ivanna",
},
{
height: 160,
weight: 64.1,
age: 34,
name: "Jacqueline",
},
{
height: 175.3,
weight: 63.6,
age: 24,
name: "Jane",
},
{
height: 169.5,
weight: 67.3,
age: 22,
name: "Jolene",
},
{
height: 160,
weight: 75.5,
age: 34,
name: "Joyce",
},
{
height: 172.7,
weight: 68.2,
age: 30,
name: "Judith",
},
{
height: 162.6,
weight: 61.4,
age: 32,
name: "Julianna",
},
{
height: 157.5,
weight: 76.8,
age: 40,
name: "Juliet",
},
{
height: 176.5,
weight: 71.8,
age: 29,
name: "Leona",
},
{
height: 164.4,
weight: 55.5,
age: 21,
name: "Lilian",
},
{
height: 160.7,
weight: 48.6,
age: 33,
name: "Lilianna",
},
{
height: 174,
weight: 66.4,
age: 33,
name: "Lorelei",
},
{
height: 163.8,
weight: 67.3,
age: 38,
name: "Louisa",
},
];
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.
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.
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 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 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.
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.