A Colour Scale maps numeric data values to colours, adding a visual dimension to the chart. This is used by series types that support a colorKey, such as Heatmap, Treemap, Sunburst, and Scatter series.
Simple Colour Scale Copy Link
To use a Colour Scale, set the series colorKey property to a data field containing numeric values.
import {
AgCartesianChartOptions,
AgCharts,
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
]);
const options: AgCartesianChartOptions = {
data: getData(),
title: {
text: "Service Quality Ratings",
},
subtitle: {
text: "NPS Score (0–10)",
},
series: [
{
type: "heatmap",
xKey: "segment",
xName: "Segment",
yKey: "service",
yName: "Service",
colorKey: "score",
colorName: "Score",
colorScale: {
domain: [0, 10],
},
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ service: "Onboarding", segment: "Enterprise", score: 9 },
{ service: "Onboarding", segment: "Mid-Market", score: 7 },
{ service: "Onboarding", segment: "SMB", score: 6 },
{ service: "Onboarding", segment: "Free", score: 5 },
{ service: "Support", segment: "Enterprise", score: 7 },
{ service: "Support", segment: "Mid-Market", score: 8 },
{ service: "Support", segment: "SMB", score: 8 },
{ service: "Support", segment: "Free", score: 4 },
{ service: "Billing", segment: "Enterprise", score: 9 },
{ service: "Billing", segment: "Mid-Market", score: 8 },
{ service: "Billing", segment: "SMB", score: 7 },
{ service: "Billing", segment: "Free", score: 9 },
{ service: "Documentation", segment: "Enterprise", score: 6 },
{ service: "Documentation", segment: "Mid-Market", score: 7 },
{ service: "Documentation", segment: "SMB", score: 7 },
{ service: "Documentation", segment: "Free", score: 6 },
{ service: "Training", segment: "Enterprise", score: 10 },
{ service: "Training", segment: "Mid-Market", score: 8 },
{ service: "Training", segment: "SMB", score: 5 },
{ service: "Training", segment: "Free", score: 3 },
];
}
{
series: [
{
type: 'heatmap',
xKey: 'segment',
yKey: 'service',
colorKey: 'score',
colorName: 'Score',
},
],
}In this configuration:
colorKeyis set to 'score', which supplies numeric values for the Colour Scale.colorNamesets the title that appears next to the colour value in tooltips.- The default colour scheme is applied as a continuous gradient across the data range.
- A Gradient Legend is displayed, showing how colours map to values.
Colour Scales are supported on Heatmap, Treemap and Sunburst, Scatter and Bubble as well as all Map series types.
Domain Copy Link
By default, the Colour Scale domain is derived from the data. Use colorScale.domain to set a fixed domain.
import {
AgCartesianChartOptions,
AgCharts,
AgHeatmapSeriesOptions,
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
]);
const options: AgCartesianChartOptions = {
data: getData(),
title: {
text: "Service Quality Ratings",
},
subtitle: {
text: "Average Rating",
},
series: [
{
type: "heatmap",
xKey: "segment",
xName: "Segment",
yKey: "service",
yName: "Service",
colorKey: "score",
colorName: "Score",
colorScale: {
fills: [{ color: "tomato" }, { color: "gold" }, { color: "seagreen" }],
},
},
],
gradientLegend: {
gradient: { preferredLength: 200 },
scale: { interval: { step: 1 } },
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
function domainChange(event: Event) {
const type = (event.target as HTMLInputElement).value as "auto" | "fixed";
const series = options.series![0] as AgHeatmapSeriesOptions;
series.colorScale = {
...series.colorScale,
domain: type === "fixed" ? [1, 10] : undefined,
};
chart.update(options);
}
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).domainChange = domainChange;
}
export function getData() {
return [
{ service: "Onboarding", segment: "Enterprise", score: 7.8 },
{ service: "Onboarding", segment: "Mid-Market", score: 6.5 },
{ service: "Onboarding", segment: "SMB", score: 5.3 },
{ service: "Onboarding", segment: "Free", score: 4.2 },
{ service: "Support", segment: "Enterprise", score: 5.5 },
{ service: "Support", segment: "Mid-Market", score: 6.2 },
{ service: "Support", segment: "SMB", score: 6.8 },
{ service: "Support", segment: "Free", score: 4.0 },
{ service: "Billing", segment: "Enterprise", score: 7.2 },
{ service: "Billing", segment: "Mid-Market", score: 6.8 },
{ service: "Billing", segment: "SMB", score: 6.5 },
{ service: "Billing", segment: "Free", score: 7.5 },
{ service: "Documentation", segment: "Enterprise", score: 5.0 },
{ service: "Documentation", segment: "Mid-Market", score: 5.5 },
{ service: "Documentation", segment: "SMB", score: 6.0 },
{ service: "Documentation", segment: "Free", score: 5.8 },
{ service: "Training", segment: "Enterprise", score: 8.0 },
{ service: "Training", segment: "Mid-Market", score: 6.8 },
{ service: "Training", segment: "SMB", score: 4.8 },
{ service: "Training", segment: "Free", score: 4.5 },
];
}
{
series: [
{
type: 'heatmap',
xKey: 'segment',
yKey: 'service',
colorKey: 'score',
colorScale: {
fills: [{ color: 'tomato' }, { color: 'gold' }, { color: 'seagreen' }],
domain: [1, 10],
},
},
],
}In this example:
- Use the buttons to toggle
domainbetween[1, 10]or the default of approximately 4 to 8. - Using Custom Colours, the lowest values are
tomato, the middle values aregold, and the highest values areseagreen.- With the fixed domain, the lowest value is 1 which is not in the data, so no cells appear as
tomato. - With the default domain, the lowest value in the domain is 4 and appears as
tomato.
- With the fixed domain, the lowest value is 1 which is not in the data, so no cells appear as
- Values outside a fixed domain are clamped. In this example of
[1, 10], a value of 0 would receive the same colour as 1.
Discrete Mode Copy Link
Use colorScale.mode to switch between a continuous gradient and discrete colour bins.
import {
AgCartesianChartOptions,
AgCharts,
AgHeatmapSeriesOptions,
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
LegendModule,
]);
const options: AgCartesianChartOptions = {
data: getData(),
title: {
text: "Service Quality Ratings",
},
subtitle: {
text: "NPS Score (0–10)",
},
series: [
{
type: "heatmap",
xKey: "segment",
xName: "Segment",
yKey: "service",
yName: "Service",
colorKey: "score",
colorName: "Score",
colorScale: {
mode: "discrete",
domain: [0, 10],
fills: [
{ color: "tomato", stop: 7 },
{ color: "gold", stop: 9 },
{ color: "seagreen" },
],
},
},
],
legend: {
enabled: true,
},
gradientLegend: {
enabled: false,
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
function modeChange(event: Event) {
const mode = (event.target as HTMLInputElement).value as
| "continuous"
| "discrete";
const discrete = mode === "discrete";
const series = options.series![0] as AgHeatmapSeriesOptions;
series.colorScale = { ...series.colorScale, mode };
options.legend = { enabled: discrete };
options.gradientLegend = { enabled: !discrete };
chart.update(options);
}
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).modeChange = modeChange;
}
export function getData() {
return [
{ service: "Onboarding", segment: "Enterprise", score: 9 },
{ service: "Onboarding", segment: "Mid-Market", score: 7 },
{ service: "Onboarding", segment: "SMB", score: 6 },
{ service: "Onboarding", segment: "Free", score: 5 },
{ service: "Support", segment: "Enterprise", score: 7 },
{ service: "Support", segment: "Mid-Market", score: 8 },
{ service: "Support", segment: "SMB", score: 8 },
{ service: "Support", segment: "Free", score: 4 },
{ service: "Billing", segment: "Enterprise", score: 9 },
{ service: "Billing", segment: "Mid-Market", score: 8 },
{ service: "Billing", segment: "SMB", score: 7 },
{ service: "Billing", segment: "Free", score: 9 },
{ service: "Documentation", segment: "Enterprise", score: 6 },
{ service: "Documentation", segment: "Mid-Market", score: 7 },
{ service: "Documentation", segment: "SMB", score: 7 },
{ service: "Documentation", segment: "Free", score: 6 },
{ service: "Training", segment: "Enterprise", score: 10 },
{ service: "Training", segment: "Mid-Market", score: 8 },
{ service: "Training", segment: "SMB", score: 5 },
{ service: "Training", segment: "Free", score: 3 },
];
}
{
series: [
{
type: 'heatmap',
xKey: 'segment',
yKey: 'service',
colorKey: 'score',
colorScale: {
mode: 'discrete',
domain: [0, 10],
fills: [{ color: 'tomato', stop: 7 }, { color: 'gold', stop: 9 }, { color: 'seagreen' }],
},
},
],
}In this example:
- In discrete mode, each data value receives a solid colour rather than a blended gradient.
- The number of bins is determined by the number of colours in the Colour Scale.
- Use Colour Stops to control the bin boundaries and the colours used.
- Discrete mode can use the Gradient Legend if desired. See Legends for details.
Custom Colours Copy Link
Use colorScale.fills to provide custom colours. Each item in the array specifies a color and an optional stop and name.
import {
AgCartesianChartOptions,
AgCharts,
AgColorScaleColorStop,
AgHeatmapSeriesOptions,
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
const equalFills: AgColorScaleColorStop[] = [
{ color: "tomato" },
{ color: "gold" },
{ color: "seagreen" },
];
const stopFills: AgColorScaleColorStop[] = [
{ color: "tomato", stop: 7 },
{ color: "gold", stop: 9 },
{ color: "seagreen" },
];
const namedFills: AgColorScaleColorStop[] = [
{ color: "tomato", name: "Detractor", stop: 7 },
{ color: "gold", name: "Passive", stop: 9 },
{ color: "seagreen", name: "Promoter" },
];
ModuleRegistry.registerModules([
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
LegendModule,
]);
const options: AgCartesianChartOptions = {
data: getData(),
title: {
text: "Service Quality Ratings",
},
subtitle: {
text: "NPS Score (0–10)",
},
series: [
{
type: "heatmap",
xKey: "segment",
xName: "Segment",
yKey: "service",
yName: "Service",
colorKey: "score",
colorName: "Score",
colorScale: {
fills: equalFills,
domain: [0, 10],
},
},
],
gradientLegend: {
enabled: true,
position: "right",
gradient: {
preferredLength: 200,
},
},
legend: {
enabled: false,
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
function modeChange(event: Event) {
const mode = (event.target as HTMLInputElement).value as
| "continuous"
| "discrete";
const series = options.series![0] as AgHeatmapSeriesOptions;
const discrete = mode === "discrete";
series.colorScale = { ...series.colorScale, mode };
options.gradientLegend = { ...options.gradientLegend, enabled: !discrete };
options.legend = { ...options.legend, enabled: discrete };
chart.update(options);
}
function fillsChange(event: Event) {
const type = (event.target as HTMLInputElement).value as
| "equal"
| "stops"
| "named";
const series = options.series![0] as AgHeatmapSeriesOptions;
const fills =
type === "named" ? namedFills : type === "stops" ? stopFills : equalFills;
series.colorScale = { ...series.colorScale, fills };
chart.update(options);
}
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).modeChange = modeChange;
(<any>window).fillsChange = fillsChange;
}
export function getData() {
return [
{ service: "Onboarding", segment: "Enterprise", score: 9 },
{ service: "Onboarding", segment: "Mid-Market", score: 7 },
{ service: "Onboarding", segment: "SMB", score: 6 },
{ service: "Onboarding", segment: "Free", score: 5 },
{ service: "Support", segment: "Enterprise", score: 7 },
{ service: "Support", segment: "Mid-Market", score: 8 },
{ service: "Support", segment: "SMB", score: 8 },
{ service: "Support", segment: "Free", score: 4 },
{ service: "Billing", segment: "Enterprise", score: 9 },
{ service: "Billing", segment: "Mid-Market", score: 8 },
{ service: "Billing", segment: "SMB", score: 7 },
{ service: "Billing", segment: "Free", score: 9 },
{ service: "Documentation", segment: "Enterprise", score: 6 },
{ service: "Documentation", segment: "Mid-Market", score: 7 },
{ service: "Documentation", segment: "SMB", score: 7 },
{ service: "Documentation", segment: "Free", score: 6 },
{ service: "Training", segment: "Enterprise", score: 10 },
{ service: "Training", segment: "Mid-Market", score: 8 },
{ service: "Training", segment: "SMB", score: 5 },
{ service: "Training", segment: "Free", score: 3 },
];
}
Colours Copy Link
Without stop values, colours are spaced equally across the data domain.
{
colorScale: {
fills: [{ color: 'tomato' }, { color: 'gold' }, { color: 'seagreen' }],
},
} Colour Stops Copy Link
With stop values, each colour is positioned at an explicit point in the domain. The fills array must be sorted in ascending stop order. The first and last fills default to the data minimum and maximum if no stop is set.
{
colorScale: {
fills: [{ color: 'tomato', stop: 7 }, { color: 'gold', stop: 9 }, { color: 'seagreen' }],
},
}In continuous mode, each stop positions its colour at that value, and colours blend smoothly between stops:
- 0 → 7 is solid
tomato. - 7 → 9 interpolates from
tomatotogold. - 9 → 10 interpolates from
goldtoseagreen.
In discrete mode, each stop instead marks the start of the next bin:
- 0–6 is solid
tomato. - 7–8 is solid
gold. - 9–10 is solid
seagreen.
Named Stops Copy Link
With name values, descriptive labels are used in the legend and tooltips instead of numeric ranges.
{
colorScale: {
fills: [
{ color: 'tomato', name: 'Detractor', stop: 7 },
{ color: 'gold', name: 'Passive', stop: 9 },
{ color: 'seagreen', name: 'Promoter' },
],
},
} Missing Data Copy Link
Set colorScale.missingDataFill to set the colour for a datum that has no value for the colorKey.
import {
AgCartesianChartOptions,
AgCharts,
AgHeatmapSeriesOptions,
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
]);
const options: AgCartesianChartOptions = {
data: getData(),
title: {
text: "Service Quality Ratings",
},
subtitle: {
text: "NPS Score (0–10)",
},
series: [
{
type: "heatmap",
xKey: "segment",
xName: "Segment",
yKey: "service",
yName: "Service",
colorKey: "score",
colorName: "Score",
colorScale: {
domain: [0, 10],
missingDataFill: "#e0e0e0",
},
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
function missingFillChange(event: Event) {
const enabled = (event.target as HTMLInputElement).value === "true";
const series = options.series![0] as AgHeatmapSeriesOptions;
series.colorScale = {
...series.colorScale,
missingDataFill: enabled ? "#e0e0e0" : undefined,
};
chart.update(options);
}
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).missingFillChange = missingFillChange;
}
export function getData() {
return [
{ service: "Onboarding", segment: "Enterprise", score: 9 },
{ service: "Onboarding", segment: "Mid-Market", score: 7 },
{ service: "Onboarding", segment: "SMB", score: 6 },
{ service: "Onboarding", segment: "Free", score: null },
{ service: "Support", segment: "Enterprise", score: 7 },
{ service: "Support", segment: "Mid-Market", score: 8 },
{ service: "Support", segment: "SMB", score: 8 },
{ service: "Support", segment: "Free", score: 4 },
{ service: "Billing", segment: "Enterprise", score: 9 },
{ service: "Billing", segment: "Mid-Market", score: 8 },
{ service: "Billing", segment: "SMB", score: 7 },
{ service: "Billing", segment: "Free", score: 9 },
{ service: "Documentation", segment: "Enterprise", score: 6 },
{ service: "Documentation", segment: "Mid-Market", score: 7 },
{ service: "Documentation", segment: "SMB", score: 7 },
{ service: "Documentation", segment: "Free", score: 6 },
{ service: "Training", segment: "Enterprise", score: 10 },
{ service: "Training", segment: "Mid-Market", score: 8 },
{ service: "Training", segment: "SMB", score: 5 },
{ service: "Training", segment: "Free", score: null },
];
}
{
colorScale: {
missingDataFill: '#e0e0e0',
},
} Legends Copy Link
The standard category Legend can be used with Discrete Colour Scales, and the Gradient Legend can be used with both discrete and continuous Colour Scales.
The default legend depends on the colorScale.mode, but can be overridden by explicitly enabling or disabling each legend.
import {
AgCartesianChartOptions,
AgCharts,
AgHeatmapSeriesOptions,
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
LegendModule,
]);
const options: AgCartesianChartOptions = {
data: getData(),
title: {
text: "Service Quality Ratings",
},
subtitle: {
text: "NPS Score (0–10)",
},
series: [
{
type: "heatmap",
xKey: "segment",
xName: "Segment",
yKey: "service",
yName: "Service",
colorKey: "score",
colorName: "Score",
colorScale: {
domain: [0, 10],
fills: [
{ color: "tomato", stop: 7 },
{ color: "gold", stop: 9 },
{ color: "seagreen" },
],
},
},
],
gradientLegend: {
enabled: true,
gradient: {
preferredLength: 200,
},
},
legend: {
enabled: false,
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
function modeChange(event: Event) {
const mode = (event.target as HTMLInputElement).value as
| "continuous"
| "discrete";
const series = options.series![0] as AgHeatmapSeriesOptions;
series.colorScale = { ...series.colorScale, mode };
chart.update(options);
}
function gradientLegendChange(event: Event) {
const enabled = (event.target as HTMLInputElement).value === "on";
options.gradientLegend = { ...options.gradientLegend, enabled };
chart.update(options);
}
function categoryLegendChange(event: Event) {
const enabled = (event.target as HTMLInputElement).value === "on";
options.legend = { ...options.legend, enabled };
chart.update(options);
}
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).modeChange = modeChange;
(<any>window).gradientLegendChange = gradientLegendChange;
(<any>window).categoryLegendChange = categoryLegendChange;
}
export function getData() {
return [
{ service: "Onboarding", segment: "Enterprise", score: 9 },
{ service: "Onboarding", segment: "Mid-Market", score: 7 },
{ service: "Onboarding", segment: "SMB", score: 6 },
{ service: "Onboarding", segment: "Free", score: 5 },
{ service: "Support", segment: "Enterprise", score: 7 },
{ service: "Support", segment: "Mid-Market", score: 8 },
{ service: "Support", segment: "SMB", score: 8 },
{ service: "Support", segment: "Free", score: 4 },
{ service: "Billing", segment: "Enterprise", score: 9 },
{ service: "Billing", segment: "Mid-Market", score: 8 },
{ service: "Billing", segment: "SMB", score: 7 },
{ service: "Billing", segment: "Free", score: 9 },
{ service: "Documentation", segment: "Enterprise", score: 6 },
{ service: "Documentation", segment: "Mid-Market", score: 7 },
{ service: "Documentation", segment: "SMB", score: 7 },
{ service: "Documentation", segment: "Free", score: 6 },
{ service: "Training", segment: "Enterprise", score: 10 },
{ service: "Training", segment: "Mid-Market", score: 8 },
{ service: "Training", segment: "SMB", score: 5 },
{ service: "Training", segment: "Free", score: 3 },
];
}
{
gradientLegend: {
enabled: true,
},
legend: {
enabled: false,
},
} Gradient Legend Copy Link
The Gradient Legend displays a colour bar alongside the chart to help match colours to values.
import {
AgCartesianChartOptions,
AgCharts,
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
]);
const options: AgCartesianChartOptions = {
data: getData(),
title: {
text: "Service Quality Ratings",
},
subtitle: {
text: "NPS Score (0–10)",
},
series: [
{
type: "heatmap",
xKey: "segment",
xName: "Segment",
yKey: "service",
yName: "Service",
colorKey: "score",
colorName: "Score",
colorScale: {
domain: [0, 10],
fills: [
{ color: "tomato", stop: 7 },
{ color: "gold", stop: 9 },
{ color: "seagreen" },
],
},
},
],
gradientLegend: {
enabled: true,
position: "right",
scale: {
label: {
fontStyle: "italic",
color: "red",
},
padding: 10,
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
function positionChange(event: Event) {
const position = (event.target as HTMLInputElement).value as
| "bottom"
| "right"
| "left"
| "top";
options.gradientLegend = { ...options.gradientLegend, position };
chart.update(options);
}
function setThickness(event: Event) {
const thickness = Number((event.target as HTMLInputElement).value);
options.gradientLegend = {
...options.gradientLegend,
gradient: { ...options.gradientLegend?.gradient, thickness },
};
document.getElementById("thicknessValue")!.innerHTML = String(thickness);
chart.update(options);
}
function setLength(event: Event) {
const preferredLength = Number((event.target as HTMLInputElement).value);
options.gradientLegend = {
...options.gradientLegend,
gradient: { ...options.gradientLegend?.gradient, preferredLength },
};
document.getElementById("lengthValue")!.innerHTML = String(preferredLength);
chart.update(options);
}
function setPadding(event: Event) {
const padding = Number((event.target as HTMLInputElement).value);
options.gradientLegend = {
...options.gradientLegend,
scale: { ...options.gradientLegend?.scale, padding },
};
document.getElementById("paddingValue")!.innerHTML = String(padding);
chart.update(options);
}
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).positionChange = positionChange;
(<any>window).setThickness = setThickness;
(<any>window).setLength = setLength;
(<any>window).setPadding = setPadding;
}
export function getData() {
return [
{ service: "Onboarding", segment: "Enterprise", score: 9 },
{ service: "Onboarding", segment: "Mid-Market", score: 7 },
{ service: "Onboarding", segment: "SMB", score: 6 },
{ service: "Onboarding", segment: "Free", score: 5 },
{ service: "Support", segment: "Enterprise", score: 7 },
{ service: "Support", segment: "Mid-Market", score: 8 },
{ service: "Support", segment: "SMB", score: 8 },
{ service: "Support", segment: "Free", score: 4 },
{ service: "Billing", segment: "Enterprise", score: 9 },
{ service: "Billing", segment: "Mid-Market", score: 8 },
{ service: "Billing", segment: "SMB", score: 7 },
{ service: "Billing", segment: "Free", score: 9 },
{ service: "Documentation", segment: "Enterprise", score: 6 },
{ service: "Documentation", segment: "Mid-Market", score: 7 },
{ service: "Documentation", segment: "SMB", score: 7 },
{ service: "Documentation", segment: "Free", score: 6 },
{ service: "Training", segment: "Enterprise", score: 10 },
{ service: "Training", segment: "Mid-Market", score: 8 },
{ service: "Training", segment: "SMB", score: 5 },
{ service: "Training", segment: "Free", score: 3 },
];
}
{
gradientLegend: {
position: 'right',
gradient: {
thickness: 50,
preferredLength: 400,
},
},
}In the above example:
positionplaces the legend at the'bottom','top','left', or'right'of the chart.- When the position is
leftorright, values are displayed in descending order. UsereverseOrderto change this.
- When the position is
gradient.thicknesscontrols the thickness of the gradient bar. This is the width when positioned left or right, or the height when positioned top or bottom.gradient.preferredLengthsets the initial length of the gradient bar. The actual length may be adjusted to fit the chart dimensions or domain.- Customise label appearance with
scale.label(font, colour) andscale.padding(distance between bar and labels).
See the API Reference for all options.
API Reference Copy Link
Properties available on the AgColorScale interface.
- fills
AgColorScaleColorStop[] - Configuration for two or more colours, and the values they are rendered at.
- domain
[AgNumericValue, AgNumericValue] - Fixed domain for the colour scale. If unset, the domain is derived from the data extent.
- mode
AgGradientColorModedefault: continuous - Whether the fills should be rendered as a continuous gradient or discrete bins.
- missingDataFill
CssColor - Fill colour for datums with no `colorKey` value. If unset, each series preserves its default behaviour for missing data.
Properties available on the AgColorScale interface.
- fills
AgColorScaleColorStop[] - Configuration for two or more colours, and the values they are rendered at.
- domain
[AgNumericValue, AgNumericValue] - Fixed domain for the colour scale. If unset, the domain is derived from the data extent.
- mode
AgGradientColorModedefault: continuous - Whether the fills should be rendered as a continuous gradient or discrete bins.
- missingDataFill
CssColor - Fill colour for datums with no `colorKey` value. If unset, each series preserves its default behaviour for missing data.
Properties available on the AgGradientLegendOptions interface.
- enabled
boolean - Whether to show the gradient legend. By default, the chart displays a gradient legend for series using a `colorKey`.
- position
AgChartLegendPositiondefault: 'bottom' - Position of the gradient legend. A placement keyword, or an object for fine-grained positioning.
- gradient
AgGradientLegendBarOptions - Gradient bar configuration.
- spacing
PixelSizedefault: 20 - The spacing in pixels to use outside the legend. __Note:__ This only applies when `floating: false`.
- reverseOrder
boolean - Reverse the display order of legend items if `true`.
- scale
AgGradientLegendScaleOptions - Options for the numbers that appear below or to the side of the gradient.
- 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.
- enabled
boolean - Whether to show the gradient legend. By default, the chart displays a gradient legend for series using a `colorKey`.
- position
AgChartLegendPositiondefault: 'bottom' - Position of the gradient legend. A placement keyword, or an object for fine-grained positioning.
- gradient
AgGradientLegendBarOptions - Gradient bar configuration.
- spacing
PixelSizedefault: 20 - The spacing in pixels to use outside the legend. __Note:__ This only applies when `floating: false`.
- reverseOrder
boolean - Reverse the display order of legend items if `true`.
- scale
AgGradientLegendScaleOptions - Options for the numbers that appear below or to the side of the gradient.
- 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.