A Heatmap Series displays data in a matrix format, using colours to denote the magnitude of the values.
Simple Heatmap Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
CategoryAxisModule,
ContextMenuModule,
CrosshairModule,
GradientLegendModule,
HeatmapSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
CrosshairModule,
GradientLegendModule,
HeatmapSeriesModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "UK monthly mean temperature Ā°C",
},
series: [
{
type: "heatmap",
xKey: "month",
xName: "Month",
yKey: "year",
yName: "Year",
colorKey: "temperature",
colorName: "Temperature",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
// Source: http://www.sheffieldweather.co.uk/Averages/MONTHLYAIRAVERAGE.htm
export function getData() {
return [
{
year: "2010",
month: "Jan",
temperature: 1.2,
},
{
year: "2010",
month: "Feb",
temperature: 1.9,
},
{
year: "2010",
month: "Mar",
temperature: 5.9,
},
{
year: "2010",
month: "Apr",
temperature: 9.1,
},
{
year: "2010",
month: "May",
temperature: 10.9,
},
{
year: "2010",
month: "Jun",
temperature: 15.2,
},
{
year: "2010",
month: "Jul",
temperature: 16.2,
},
{
year: "2010",
month: "Aug",
temperature: 14.9,
},
{
year: "2010",
month: "Sep",
temperature: 13.4,
},
{
year: "2010",
month: "Oct",
temperature: 9.5,
},
{
year: "2010",
month: "Nov",
temperature: 4.9,
},
{
year: "2010",
month: "Dec",
temperature: 0.4,
},
{
year: "2011",
month: "Jan",
temperature: 3.9,
},
{
year: "2011",
month: "Feb",
temperature: 6,
},
{
year: "2011",
month: "Mar",
temperature: 6.6,
},
{
year: "2011",
month: "Apr",
temperature: 12,
},
{
year: "2011",
month: "May",
temperature: 12,
},
{
year: "2011",
month: "Jun",
temperature: 14.2,
},
{
year: "2011",
month: "Jul",
temperature: 15.8,
},
{
year: "2011",
month: "Aug",
temperature: 15.8,
},
{
year: "2011",
month: "Sep",
temperature: 14.9,
},
{
year: "2011",
month: "Oct",
temperature: 12.2,
},
{
year: "2011",
month: "Nov",
temperature: 8.9,
},
{
year: "2011",
month: "Dec",
temperature: 5.4,
},
{
year: "2012",
month: "Jan",
temperature: 5.1,
},
{
year: "2012",
month: "Feb",
temperature: 4.5,
},
{
year: "2012",
month: "Mar",
temperature: 8.6,
},
{
year: "2012",
month: "Apr",
temperature: 6.7,
},
{
year: "2012",
month: "May",
temperature: 11.6,
},
{
year: "2012",
month: "Jun",
temperature: 13.4,
},
{
year: "2012",
month: "Jul",
temperature: 15.5,
},
{
year: "2012",
month: "Aug",
temperature: 16.2,
},
{
year: "2012",
month: "Sep",
temperature: 12.7,
},
{
year: "2012",
month: "Oct",
temperature: 8.8,
},
{
year: "2012",
month: "Nov",
temperature: 6.1,
},
{
year: "2012",
month: "Dec",
temperature: 4.2,
},
{
year: "2013",
month: "Jan",
temperature: 3.4,
},
{
year: "2013",
month: "Feb",
temperature: 2.7,
},
{
year: "2013",
month: "Mar",
temperature: 1.7,
},
{
year: "2013",
month: "Apr",
temperature: 7.4,
},
{
year: "2013",
month: "May",
temperature: 10.6,
},
{
year: "2013",
month: "Jun",
temperature: 14.1,
},
{
year: "2013",
month: "Jul",
temperature: 18.4,
},
{
year: "2013",
month: "Aug",
temperature: 16.8,
},
{
year: "2013",
month: "Sep",
temperature: 13.3,
},
{
year: "2013",
month: "Oct",
temperature: 11.7,
},
{
year: "2013",
month: "Nov",
temperature: 6.2,
},
{
year: "2013",
month: "Dec",
temperature: 6.3,
},
{
year: "2014",
month: "Jan",
temperature: 5,
},
{
year: "2014",
month: "Feb",
temperature: 5.6,
},
{
year: "2014",
month: "Mar",
temperature: 7.4,
},
{
year: "2014",
month: "Apr",
temperature: 10.1,
},
{
year: "2014",
month: "May",
temperature: 12.2,
},
{
year: "2014",
month: "Jun",
temperature: 15.3,
},
{
year: "2014",
month: "Jul",
temperature: 17.9,
},
{
year: "2014",
month: "Aug",
temperature: 14.9,
},
{
year: "2014",
month: "Sep",
temperature: 14.4,
},
{
year: "2014",
month: "Oct",
temperature: 11.4,
},
{
year: "2014",
month: "Nov",
temperature: 7.8,
},
{
year: "2014",
month: "Dec",
temperature: 5.2,
},
{
year: "2015",
month: "Jan",
temperature: 4.1,
},
{
year: "2015",
month: "Feb",
temperature: 3.8,
},
{
year: "2015",
month: "Mar",
temperature: 5.9,
},
{
year: "2015",
month: "Apr",
temperature: 9.1,
},
{
year: "2015",
month: "May",
temperature: 10.6,
},
{
year: "2015",
month: "Jun",
temperature: 13.9,
},
{
year: "2015",
month: "Jul",
temperature: 15.7,
},
{
year: "2015",
month: "Aug",
temperature: 15.8,
},
{
year: "2015",
month: "Sep",
temperature: 12.2,
},
{
year: "2015",
month: "Oct",
temperature: 10.2,
},
{
year: "2015",
month: "Nov",
temperature: 8.7,
},
{
year: "2015",
month: "Dec",
temperature: 8.6,
},
{
year: "2016",
month: "Jan",
temperature: 4.8,
},
{
year: "2016",
month: "Feb",
temperature: 4.2,
},
{
year: "2016",
month: "Mar",
temperature: 5.5,
},
{
year: "2016",
month: "Apr",
temperature: 7,
},
{
year: "2016",
month: "May",
temperature: 11.8,
},
{
year: "2016",
month: "Jun",
temperature: 14.6,
},
{
year: "2016",
month: "Jul",
temperature: 16.6,
},
{
year: "2016",
month: "Aug",
temperature: 16.6,
},
{
year: "2016",
month: "Sep",
temperature: 15.4,
},
{
year: "2016",
month: "Oct",
temperature: 10.2,
},
{
year: "2016",
month: "Nov",
temperature: 5.4,
},
{
year: "2016",
month: "Dec",
temperature: 6.3,
},
{
year: "2017",
month: "Jan",
temperature: 3.9,
},
{
year: "2017",
month: "Feb",
temperature: 5.2,
},
{
year: "2017",
month: "Mar",
temperature: 8,
},
{
year: "2017",
month: "Apr",
temperature: 8.6,
},
{
year: "2017",
month: "May",
temperature: 12.8,
},
{
year: "2017",
month: "Jun",
temperature: 15.7,
},
{
year: "2017",
month: "Jul",
temperature: 16.4,
},
{
year: "2017",
month: "Aug",
temperature: 15.2,
},
{
year: "2017",
month: "Sep",
temperature: 13,
},
{
year: "2017",
month: "Oct",
temperature: 11.9,
},
{
year: "2017",
month: "Nov",
temperature: 6.5,
},
{
year: "2017",
month: "Dec",
temperature: 4.7,
},
{
year: "2018",
month: "Jan",
temperature: 4.4,
},
{
year: "2018",
month: "Feb",
temperature: 2.3,
},
{
year: "2018",
month: "Mar",
temperature: 3.7,
},
{
year: "2018",
month: "Apr",
temperature: 8.8,
},
{
year: "2018",
month: "May",
temperature: 13.8,
},
{
year: "2018",
month: "Jun",
temperature: 16.4,
},
{
year: "2018",
month: "Jul",
temperature: 19.5,
},
{
year: "2018",
month: "Aug",
temperature: 17,
},
{
year: "2018",
month: "Sep",
temperature: 13.4,
},
{
year: "2018",
month: "Oct",
temperature: 10.3,
},
{
year: "2018",
month: "Nov",
temperature: 7.4,
},
{
year: "2018",
month: "Dec",
temperature: 6.4,
},
{
year: "2019",
month: "Jan",
temperature: 4.4,
},
{
year: "2019",
month: "Feb",
temperature: 6.9,
},
{
year: "2019",
month: "Mar",
temperature: 7.5,
},
{
year: "2019",
month: "Apr",
temperature: 8.9,
},
{
year: "2019",
month: "May",
temperature: 11.5,
},
{
year: "2019",
month: "Jun",
temperature: 14.1,
},
{
year: "2019",
month: "Jul",
temperature: 17.8,
},
{
year: "2019",
month: "Aug",
temperature: 17.1,
},
{
year: "2019",
month: "Sep",
temperature: 13.7,
},
{
year: "2019",
month: "Oct",
temperature: 9.2,
},
{
year: "2019",
month: "Nov",
temperature: 5.4,
},
{
year: "2019",
month: "Dec",
temperature: 5.4,
},
{
year: "2020",
month: "Jan",
temperature: 6.4,
},
{
year: "2020",
month: "Feb",
temperature: 5.6,
},
{
year: "2020",
month: "Mar",
temperature: 6.3,
},
{
year: "2020",
month: "Apr",
temperature: 10.3,
},
{
year: "2020",
month: "May",
temperature: 12.8,
},
{
year: "2020",
month: "Jun",
temperature: 15,
},
{
year: "2020",
month: "Jul",
temperature: 15.6,
},
{
year: "2020",
month: "Aug",
temperature: 17.2,
},
{
year: "2020",
month: "Sep",
temperature: 13.7,
},
{
year: "2020",
month: "Oct",
temperature: 9.8,
},
{
year: "2020",
month: "Nov",
temperature: 8.1,
},
{
year: "2020",
month: "Dec",
temperature: 4.6,
},
{
year: "2021",
month: "Jan",
temperature: 2.8,
},
{
year: "2021",
month: "Feb",
temperature: 4.3,
},
{
year: "2021",
month: "Mar",
temperature: 7.2,
},
{
year: "2021",
month: "Apr",
temperature: 6.5,
},
{
year: "2021",
month: "May",
temperature: 10,
},
{
year: "2021",
month: "Jun",
temperature: 16.1,
},
{
year: "2021",
month: "Jul",
temperature: 18.4,
},
{
year: "2021",
month: "Aug",
temperature: 16.1,
},
{
year: "2021",
month: "Sep",
temperature: 16.2,
},
{
year: "2021",
month: "Oct",
temperature: 11.6,
},
{
year: "2021",
month: "Nov",
temperature: 7.7,
},
{
year: "2021",
month: "Dec",
temperature: 5.4,
},
{
year: "2022",
month: "Jan",
temperature: 5.2,
},
{
year: "2022",
month: "Feb",
temperature: 6.1,
},
{
year: "2022",
month: "Mar",
temperature: 7.4,
},
{
year: "2022",
month: "Apr",
temperature: 9.2,
},
{
year: "2022",
month: "May",
temperature: 13.3,
},
{
year: "2022",
month: "Jun",
temperature: 15.5,
},
{
year: "2022",
month: "Jul",
temperature: 18.5,
},
{
year: "2022",
month: "Aug",
temperature: 18.4,
},
{
year: "2022",
month: "Sep",
temperature: 14.5,
},
{
year: "2022",
month: "Oct",
temperature: 12.1,
},
{
year: "2022",
month: "Nov",
temperature: 8.4,
},
{
year: "2022",
month: "Dec",
temperature: 3.6,
},
];
}
To create a Heatmap Series, use the heatmap series type.
{
series: [
{
type: 'heatmap',
xKey: 'month',
yKey: 'year',
colorKey: 'temperature',
},
],
}In this configuration:
xKeyis set to 'month', which is the category for the x-axis.yKeyis set to 'year', which is the category for the y-axis.colorKeyis set to 'temperature', which supplies numerical values for the Colour Scale.
Colour Scale Copy Link
import {
AgCartesianChartOptions,
AgCharts,
AgHeatmapSeriesOptions,
CategoryAxisModule,
GradientLegendModule,
HeatmapSeriesModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
CategoryAxisModule,
GradientLegendModule,
LegendModule,
HeatmapSeriesModule,
]);
const options: AgCartesianChartOptions = {
data: getData(),
title: {
text: "UK Monthly Mean Temperature",
},
series: [
{
type: "heatmap",
xKey: "month",
xName: "Month",
yKey: "year",
yName: "Year",
colorKey: "temperature",
colorName: "Temperature",
colorScale: {
fills: [
{ color: "navy" },
{ color: "lightyellow", stop: 10 },
{ color: "darkred" },
],
},
},
],
};
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 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" ? [0, 25] : undefined,
};
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).domainChange = domainChange;
}
// Source: http://www.sheffieldweather.co.uk/Averages/MONTHLYAIRAVERAGE.htm
export function getData() {
return [
{
year: "2010",
month: "Jan",
temperature: 1.2,
},
{
year: "2010",
month: "Feb",
temperature: 1.9,
},
{
year: "2010",
month: "Mar",
temperature: 5.9,
},
{
year: "2010",
month: "Apr",
temperature: 9.1,
},
{
year: "2010",
month: "May",
temperature: 10.9,
},
{
year: "2010",
month: "Jun",
temperature: 15.2,
},
{
year: "2010",
month: "Jul",
temperature: 16.2,
},
{
year: "2010",
month: "Aug",
temperature: 14.9,
},
{
year: "2010",
month: "Sep",
temperature: 13.4,
},
{
year: "2010",
month: "Oct",
temperature: 9.5,
},
{
year: "2010",
month: "Nov",
temperature: 4.9,
},
{
year: "2010",
month: "Dec",
temperature: 0.4,
},
{
year: "2011",
month: "Jan",
temperature: 3.9,
},
{
year: "2011",
month: "Feb",
temperature: 6,
},
{
year: "2011",
month: "Mar",
temperature: 6.6,
},
{
year: "2011",
month: "Apr",
temperature: 12,
},
{
year: "2011",
month: "May",
temperature: 12,
},
{
year: "2011",
month: "Jun",
temperature: 14.2,
},
{
year: "2011",
month: "Jul",
temperature: 15.8,
},
{
year: "2011",
month: "Aug",
temperature: 15.8,
},
{
year: "2011",
month: "Sep",
temperature: 14.9,
},
{
year: "2011",
month: "Oct",
temperature: 12.2,
},
{
year: "2011",
month: "Nov",
temperature: 8.9,
},
{
year: "2011",
month: "Dec",
temperature: 5.4,
},
{
year: "2012",
month: "Jan",
temperature: 5.1,
},
{
year: "2012",
month: "Feb",
temperature: 4.5,
},
{
year: "2012",
month: "Mar",
temperature: 8.6,
},
{
year: "2012",
month: "Apr",
temperature: 6.7,
},
{
year: "2012",
month: "May",
temperature: 11.6,
},
{
year: "2012",
month: "Jun",
temperature: 13.4,
},
{
year: "2012",
month: "Jul",
temperature: 15.5,
},
{
year: "2012",
month: "Aug",
temperature: 16.2,
},
{
year: "2012",
month: "Sep",
temperature: 12.7,
},
{
year: "2012",
month: "Oct",
temperature: 8.8,
},
{
year: "2012",
month: "Nov",
temperature: 6.1,
},
{
year: "2012",
month: "Dec",
temperature: 4.2,
},
{
year: "2013",
month: "Jan",
temperature: 3.4,
},
{
year: "2013",
month: "Feb",
temperature: 2.7,
},
{
year: "2013",
month: "Mar",
temperature: 1.7,
},
{
year: "2013",
month: "Apr",
temperature: 7.4,
},
{
year: "2013",
month: "May",
temperature: 10.6,
},
{
year: "2013",
month: "Jun",
temperature: 14.1,
},
{
year: "2013",
month: "Jul",
temperature: 18.4,
},
{
year: "2013",
month: "Aug",
temperature: 16.8,
},
{
year: "2013",
month: "Sep",
temperature: 13.3,
},
{
year: "2013",
month: "Oct",
temperature: 11.7,
},
{
year: "2013",
month: "Nov",
temperature: 6.2,
},
{
year: "2013",
month: "Dec",
temperature: 6.3,
},
{
year: "2014",
month: "Jan",
temperature: 5,
},
{
year: "2014",
month: "Feb",
temperature: 5.6,
},
{
year: "2014",
month: "Mar",
temperature: 7.4,
},
{
year: "2014",
month: "Apr",
temperature: 10.1,
},
{
year: "2014",
month: "May",
temperature: 12.2,
},
{
year: "2014",
month: "Jun",
temperature: 15.3,
},
{
year: "2014",
month: "Jul",
temperature: 17.9,
},
{
year: "2014",
month: "Aug",
temperature: 14.9,
},
{
year: "2014",
month: "Sep",
temperature: 14.4,
},
{
year: "2014",
month: "Oct",
temperature: 11.4,
},
{
year: "2014",
month: "Nov",
temperature: 7.8,
},
{
year: "2014",
month: "Dec",
temperature: 5.2,
},
{
year: "2015",
month: "Jan",
temperature: 4.1,
},
{
year: "2015",
month: "Feb",
temperature: 3.8,
},
{
year: "2015",
month: "Mar",
temperature: 5.9,
},
{
year: "2015",
month: "Apr",
temperature: 9.1,
},
{
year: "2015",
month: "May",
temperature: 10.6,
},
{
year: "2015",
month: "Jun",
temperature: 13.9,
},
{
year: "2015",
month: "Jul",
temperature: 15.7,
},
{
year: "2015",
month: "Aug",
temperature: 15.8,
},
{
year: "2015",
month: "Sep",
temperature: 12.2,
},
{
year: "2015",
month: "Oct",
temperature: 10.2,
},
{
year: "2015",
month: "Nov",
temperature: 8.7,
},
{
year: "2015",
month: "Dec",
temperature: 8.6,
},
{
year: "2016",
month: "Jan",
temperature: 4.8,
},
{
year: "2016",
month: "Feb",
temperature: 4.2,
},
{
year: "2016",
month: "Mar",
temperature: 5.5,
},
{
year: "2016",
month: "Apr",
temperature: 7,
},
{
year: "2016",
month: "May",
temperature: 11.8,
},
{
year: "2016",
month: "Jun",
temperature: 14.6,
},
{
year: "2016",
month: "Jul",
temperature: 16.6,
},
{
year: "2016",
month: "Aug",
temperature: 16.6,
},
{
year: "2016",
month: "Sep",
temperature: 15.4,
},
{
year: "2016",
month: "Oct",
temperature: 10.2,
},
{
year: "2016",
month: "Nov",
temperature: 5.4,
},
{
year: "2016",
month: "Dec",
temperature: 6.3,
},
{
year: "2017",
month: "Jan",
temperature: 3.9,
},
{
year: "2017",
month: "Feb",
temperature: 5.2,
},
{
year: "2017",
month: "Mar",
temperature: 8,
},
{
year: "2017",
month: "Apr",
temperature: 8.6,
},
{
year: "2017",
month: "May",
temperature: 12.8,
},
{
year: "2017",
month: "Jun",
temperature: 15.7,
},
{
year: "2017",
month: "Jul",
temperature: 16.4,
},
{
year: "2017",
month: "Aug",
temperature: 15.2,
},
{
year: "2017",
month: "Sep",
temperature: 13,
},
{
year: "2017",
month: "Oct",
temperature: 11.9,
},
{
year: "2017",
month: "Nov",
temperature: 6.5,
},
{
year: "2017",
month: "Dec",
temperature: 4.7,
},
{
year: "2018",
month: "Jan",
temperature: 4.4,
},
{
year: "2018",
month: "Feb",
temperature: 2.3,
},
{
year: "2018",
month: "Mar",
temperature: 3.7,
},
{
year: "2018",
month: "Apr",
temperature: 8.8,
},
{
year: "2018",
month: "May",
temperature: 13.8,
},
{
year: "2018",
month: "Jun",
temperature: 16.4,
},
{
year: "2018",
month: "Jul",
temperature: 19.5,
},
{
year: "2018",
month: "Aug",
temperature: 17,
},
{
year: "2018",
month: "Sep",
temperature: 13.4,
},
{
year: "2018",
month: "Oct",
temperature: 10.3,
},
{
year: "2018",
month: "Nov",
temperature: 7.4,
},
{
year: "2018",
month: "Dec",
temperature: 6.4,
},
{
year: "2019",
month: "Jan",
temperature: 4.4,
},
{
year: "2019",
month: "Feb",
temperature: 6.9,
},
{
year: "2019",
month: "Mar",
temperature: 7.5,
},
{
year: "2019",
month: "Apr",
temperature: 8.9,
},
{
year: "2019",
month: "May",
temperature: 11.5,
},
{
year: "2019",
month: "Jun",
temperature: 14.1,
},
{
year: "2019",
month: "Jul",
temperature: 17.8,
},
{
year: "2019",
month: "Aug",
temperature: 17.1,
},
{
year: "2019",
month: "Sep",
temperature: 13.7,
},
{
year: "2019",
month: "Oct",
temperature: 9.2,
},
{
year: "2019",
month: "Nov",
temperature: 5.4,
},
{
year: "2019",
month: "Dec",
temperature: 5.4,
},
{
year: "2020",
month: "Jan",
temperature: 6.4,
},
{
year: "2020",
month: "Feb",
temperature: 5.6,
},
{
year: "2020",
month: "Mar",
temperature: 6.3,
},
{
year: "2020",
month: "Apr",
temperature: 10.3,
},
{
year: "2020",
month: "May",
temperature: 12.8,
},
{
year: "2020",
month: "Jun",
temperature: 15,
},
{
year: "2020",
month: "Jul",
temperature: 15.6,
},
{
year: "2020",
month: "Aug",
temperature: 17.2,
},
{
year: "2020",
month: "Sep",
temperature: 13.7,
},
{
year: "2020",
month: "Oct",
temperature: 9.8,
},
{
year: "2020",
month: "Nov",
temperature: 8.1,
},
{
year: "2020",
month: "Dec",
temperature: 4.6,
},
{
year: "2021",
month: "Jan",
temperature: 2.8,
},
{
year: "2021",
month: "Feb",
temperature: 4.3,
},
{
year: "2021",
month: "Mar",
temperature: 7.2,
},
{
year: "2021",
month: "Apr",
temperature: 6.5,
},
{
year: "2021",
month: "May",
temperature: 10,
},
{
year: "2021",
month: "Jun",
temperature: 16.1,
},
{
year: "2021",
month: "Jul",
temperature: 18.4,
},
{
year: "2021",
month: "Aug",
temperature: 16.1,
},
{
year: "2021",
month: "Sep",
temperature: 16.2,
},
{
year: "2021",
month: "Oct",
temperature: 11.6,
},
{
year: "2021",
month: "Nov",
temperature: 7.7,
},
{
year: "2021",
month: "Dec",
temperature: 5.4,
},
{
year: "2022",
month: "Jan",
temperature: 5.2,
},
{
year: "2022",
month: "Feb",
temperature: 6.1,
},
{
year: "2022",
month: "Mar",
temperature: 7.4,
},
{
year: "2022",
month: "Apr",
temperature: 9.2,
},
{
year: "2022",
month: "May",
temperature: 13.3,
},
{
year: "2022",
month: "Jun",
temperature: 15.5,
},
{
year: "2022",
month: "Jul",
temperature: 18.5,
},
{
year: "2022",
month: "Aug",
temperature: 18.4,
},
{
year: "2022",
month: "Sep",
temperature: 14.5,
},
{
year: "2022",
month: "Oct",
temperature: 12.1,
},
{
year: "2022",
month: "Nov",
temperature: 8.4,
},
{
year: "2022",
month: "Dec",
temperature: 3.6,
},
];
}
Use colorScale to control how numeric values map to colours. This includes custom colours, discrete bins, and a fixed domain.
{
series: [
{
type: 'heatmap',
xKey: 'month',
yKey: 'year',
colorKey: 'temperature',
colorScale: {
fills: [{ color: 'navy' }, { color: 'lightyellow', stop: 10 }, { color: 'darkred' }],
},
},
],
}In this example:
fillsspecifies the colours and optionalstoppositions. Withoutstopvalues, colours are spaced equally across the data range.modeswitches between a'continuous'gradient and'discrete'bins.domainoverrides the auto-detected range to consistent colours regardless of the data extent.
For the full range of options including named stops, missing data handling, and more see the Colour Scale page.
Labels Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
CategoryAxisModule,
ContextMenuModule,
CrosshairModule,
GradientLegendModule,
HeatmapSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { DataType, getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
CrosshairModule,
GradientLegendModule,
HeatmapSeriesModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions<DataType> = {
data: getData(),
title: {
text: "UK monthly mean temperature Ā°C",
},
series: [
{
type: "heatmap",
xKey: "month",
xName: "Month",
yKey: "year",
yName: "Year",
colorKey: "temperature",
colorName: "Temperature",
label: {
enabled: true,
formatter: ({ datum: { temperature } }) =>
`${temperature.toFixed(0)}Ā°C`,
},
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
// Source: http://www.sheffieldweather.co.uk/Averages/MONTHLYAIRAVERAGE.htm
export interface DataType {
year: string;
month: string;
temperature: number;
}
export function getData(): DataType[] {
return [
{
year: "2010",
month: "Jan",
temperature: 1.2,
},
{
year: "2010",
month: "Feb",
temperature: 1.9,
},
{
year: "2010",
month: "Mar",
temperature: 5.9,
},
{
year: "2010",
month: "Apr",
temperature: 9.1,
},
{
year: "2010",
month: "May",
temperature: 10.9,
},
{
year: "2010",
month: "Jun",
temperature: 15.2,
},
{
year: "2010",
month: "Jul",
temperature: 16.2,
},
{
year: "2010",
month: "Aug",
temperature: 14.9,
},
{
year: "2010",
month: "Sep",
temperature: 13.4,
},
{
year: "2010",
month: "Oct",
temperature: 9.5,
},
{
year: "2010",
month: "Nov",
temperature: 4.9,
},
{
year: "2010",
month: "Dec",
temperature: 0.4,
},
{
year: "2011",
month: "Jan",
temperature: 3.9,
},
{
year: "2011",
month: "Feb",
temperature: 6,
},
{
year: "2011",
month: "Mar",
temperature: 6.6,
},
{
year: "2011",
month: "Apr",
temperature: 12,
},
{
year: "2011",
month: "May",
temperature: 12,
},
{
year: "2011",
month: "Jun",
temperature: 14.2,
},
{
year: "2011",
month: "Jul",
temperature: 15.8,
},
{
year: "2011",
month: "Aug",
temperature: 15.8,
},
{
year: "2011",
month: "Sep",
temperature: 14.9,
},
{
year: "2011",
month: "Oct",
temperature: 12.2,
},
{
year: "2011",
month: "Nov",
temperature: 8.9,
},
{
year: "2011",
month: "Dec",
temperature: 5.4,
},
{
year: "2012",
month: "Jan",
temperature: 5.1,
},
{
year: "2012",
month: "Feb",
temperature: 4.5,
},
{
year: "2012",
month: "Mar",
temperature: 8.6,
},
{
year: "2012",
month: "Apr",
temperature: 6.7,
},
{
year: "2012",
month: "May",
temperature: 11.6,
},
{
year: "2012",
month: "Jun",
temperature: 13.4,
},
{
year: "2012",
month: "Jul",
temperature: 15.5,
},
{
year: "2012",
month: "Aug",
temperature: 16.2,
},
{
year: "2012",
month: "Sep",
temperature: 12.7,
},
{
year: "2012",
month: "Oct",
temperature: 8.8,
},
{
year: "2012",
month: "Nov",
temperature: 6.1,
},
{
year: "2012",
month: "Dec",
temperature: 4.2,
},
{
year: "2013",
month: "Jan",
temperature: 3.4,
},
{
year: "2013",
month: "Feb",
temperature: 2.7,
},
{
year: "2013",
month: "Mar",
temperature: 1.7,
},
{
year: "2013",
month: "Apr",
temperature: 7.4,
},
{
year: "2013",
month: "May",
temperature: 10.6,
},
{
year: "2013",
month: "Jun",
temperature: 14.1,
},
{
year: "2013",
month: "Jul",
temperature: 18.4,
},
{
year: "2013",
month: "Aug",
temperature: 16.8,
},
{
year: "2013",
month: "Sep",
temperature: 13.3,
},
{
year: "2013",
month: "Oct",
temperature: 11.7,
},
{
year: "2013",
month: "Nov",
temperature: 6.2,
},
{
year: "2013",
month: "Dec",
temperature: 6.3,
},
{
year: "2014",
month: "Jan",
temperature: 5,
},
{
year: "2014",
month: "Feb",
temperature: 5.6,
},
{
year: "2014",
month: "Mar",
temperature: 7.4,
},
{
year: "2014",
month: "Apr",
temperature: 10.1,
},
{
year: "2014",
month: "May",
temperature: 12.2,
},
{
year: "2014",
month: "Jun",
temperature: 15.3,
},
{
year: "2014",
month: "Jul",
temperature: 17.9,
},
{
year: "2014",
month: "Aug",
temperature: 14.9,
},
{
year: "2014",
month: "Sep",
temperature: 14.4,
},
{
year: "2014",
month: "Oct",
temperature: 11.4,
},
{
year: "2014",
month: "Nov",
temperature: 7.8,
},
{
year: "2014",
month: "Dec",
temperature: 5.2,
},
{
year: "2015",
month: "Jan",
temperature: 4.1,
},
{
year: "2015",
month: "Feb",
temperature: 3.8,
},
{
year: "2015",
month: "Mar",
temperature: 5.9,
},
{
year: "2015",
month: "Apr",
temperature: 9.1,
},
{
year: "2015",
month: "May",
temperature: 10.6,
},
{
year: "2015",
month: "Jun",
temperature: 13.9,
},
{
year: "2015",
month: "Jul",
temperature: 15.7,
},
{
year: "2015",
month: "Aug",
temperature: 15.8,
},
{
year: "2015",
month: "Sep",
temperature: 12.2,
},
{
year: "2015",
month: "Oct",
temperature: 10.2,
},
{
year: "2015",
month: "Nov",
temperature: 8.7,
},
{
year: "2015",
month: "Dec",
temperature: 8.6,
},
{
year: "2016",
month: "Jan",
temperature: 4.8,
},
{
year: "2016",
month: "Feb",
temperature: 4.2,
},
{
year: "2016",
month: "Mar",
temperature: 5.5,
},
{
year: "2016",
month: "Apr",
temperature: 7,
},
{
year: "2016",
month: "May",
temperature: 11.8,
},
{
year: "2016",
month: "Jun",
temperature: 14.6,
},
{
year: "2016",
month: "Jul",
temperature: 16.6,
},
{
year: "2016",
month: "Aug",
temperature: 16.6,
},
{
year: "2016",
month: "Sep",
temperature: 15.4,
},
{
year: "2016",
month: "Oct",
temperature: 10.2,
},
{
year: "2016",
month: "Nov",
temperature: 5.4,
},
{
year: "2016",
month: "Dec",
temperature: 6.3,
},
{
year: "2017",
month: "Jan",
temperature: 3.9,
},
{
year: "2017",
month: "Feb",
temperature: 5.2,
},
{
year: "2017",
month: "Mar",
temperature: 8,
},
{
year: "2017",
month: "Apr",
temperature: 8.6,
},
{
year: "2017",
month: "May",
temperature: 12.8,
},
{
year: "2017",
month: "Jun",
temperature: 15.7,
},
{
year: "2017",
month: "Jul",
temperature: 16.4,
},
{
year: "2017",
month: "Aug",
temperature: 15.2,
},
{
year: "2017",
month: "Sep",
temperature: 13,
},
{
year: "2017",
month: "Oct",
temperature: 11.9,
},
{
year: "2017",
month: "Nov",
temperature: 6.5,
},
{
year: "2017",
month: "Dec",
temperature: 4.7,
},
{
year: "2018",
month: "Jan",
temperature: 4.4,
},
{
year: "2018",
month: "Feb",
temperature: 2.3,
},
{
year: "2018",
month: "Mar",
temperature: 3.7,
},
{
year: "2018",
month: "Apr",
temperature: 8.8,
},
{
year: "2018",
month: "May",
temperature: 13.8,
},
{
year: "2018",
month: "Jun",
temperature: 16.4,
},
{
year: "2018",
month: "Jul",
temperature: 19.5,
},
{
year: "2018",
month: "Aug",
temperature: 17,
},
{
year: "2018",
month: "Sep",
temperature: 13.4,
},
{
year: "2018",
month: "Oct",
temperature: 10.3,
},
{
year: "2018",
month: "Nov",
temperature: 7.4,
},
{
year: "2018",
month: "Dec",
temperature: 6.4,
},
{
year: "2019",
month: "Jan",
temperature: 4.4,
},
{
year: "2019",
month: "Feb",
temperature: 6.9,
},
{
year: "2019",
month: "Mar",
temperature: 7.5,
},
{
year: "2019",
month: "Apr",
temperature: 8.9,
},
{
year: "2019",
month: "May",
temperature: 11.5,
},
{
year: "2019",
month: "Jun",
temperature: 14.1,
},
{
year: "2019",
month: "Jul",
temperature: 17.8,
},
{
year: "2019",
month: "Aug",
temperature: 17.1,
},
{
year: "2019",
month: "Sep",
temperature: 13.7,
},
{
year: "2019",
month: "Oct",
temperature: 9.2,
},
{
year: "2019",
month: "Nov",
temperature: 5.4,
},
{
year: "2019",
month: "Dec",
temperature: 5.4,
},
{
year: "2020",
month: "Jan",
temperature: 6.4,
},
{
year: "2020",
month: "Feb",
temperature: 5.6,
},
{
year: "2020",
month: "Mar",
temperature: 6.3,
},
{
year: "2020",
month: "Apr",
temperature: 10.3,
},
{
year: "2020",
month: "May",
temperature: 12.8,
},
{
year: "2020",
month: "Jun",
temperature: 15,
},
{
year: "2020",
month: "Jul",
temperature: 15.6,
},
{
year: "2020",
month: "Aug",
temperature: 17.2,
},
{
year: "2020",
month: "Sep",
temperature: 13.7,
},
{
year: "2020",
month: "Oct",
temperature: 9.8,
},
{
year: "2020",
month: "Nov",
temperature: 8.1,
},
{
year: "2020",
month: "Dec",
temperature: 4.6,
},
{
year: "2021",
month: "Jan",
temperature: 2.8,
},
{
year: "2021",
month: "Feb",
temperature: 4.3,
},
{
year: "2021",
month: "Mar",
temperature: 7.2,
},
{
year: "2021",
month: "Apr",
temperature: 6.5,
},
{
year: "2021",
month: "May",
temperature: 10,
},
{
year: "2021",
month: "Jun",
temperature: 16.1,
},
{
year: "2021",
month: "Jul",
temperature: 18.4,
},
{
year: "2021",
month: "Aug",
temperature: 16.1,
},
{
year: "2021",
month: "Sep",
temperature: 16.2,
},
{
year: "2021",
month: "Oct",
temperature: 11.6,
},
{
year: "2021",
month: "Nov",
temperature: 7.7,
},
{
year: "2021",
month: "Dec",
temperature: 5.4,
},
{
year: "2022",
month: "Jan",
temperature: 5.2,
},
{
year: "2022",
month: "Feb",
temperature: 6.1,
},
{
year: "2022",
month: "Mar",
temperature: 7.4,
},
{
year: "2022",
month: "Apr",
temperature: 9.2,
},
{
year: "2022",
month: "May",
temperature: 13.3,
},
{
year: "2022",
month: "Jun",
temperature: 15.5,
},
{
year: "2022",
month: "Jul",
temperature: 18.5,
},
{
year: "2022",
month: "Aug",
temperature: 18.4,
},
{
year: "2022",
month: "Sep",
temperature: 14.5,
},
{
year: "2022",
month: "Oct",
temperature: 12.1,
},
{
year: "2022",
month: "Nov",
temperature: 8.4,
},
{
year: "2022",
month: "Dec",
temperature: 3.6,
},
];
}
If label.enabled is set to true, the labels will show the numeric value from colorKey.
colorKey: 'temperature',
label: {
enabled: true,
formatter: ({ datum: { temperature } }) => `${temperature.toFixed(0)}Ā°C`,
}A label formatter can be used to customise the label text.
Gradient Legend Copy Link
The Gradient Legend is enabled by default for heatmap series using a colorKey. It displays a colour bar to help match cell colours to values.
import {
AgChartOptions,
AgCharts,
AnimationModule,
CategoryAxisModule,
ContextMenuModule,
CrosshairModule,
GradientLegendModule,
HeatmapSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CategoryAxisModule,
CrosshairModule,
GradientLegendModule,
HeatmapSeriesModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "UK monthly mean temperature Ā°C",
},
series: [
{
type: "heatmap",
xKey: "month",
xName: "Month",
yKey: "year",
yName: "Year",
colorKey: "temperature",
colorName: "Temperature",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
// Source: http://www.sheffieldweather.co.uk/Averages/MONTHLYAIRAVERAGE.htm
export function getData() {
return [
{
year: "2010",
month: "Jan",
temperature: 1.2,
},
{
year: "2010",
month: "Feb",
temperature: 1.9,
},
{
year: "2010",
month: "Mar",
temperature: 5.9,
},
{
year: "2010",
month: "Apr",
temperature: 9.1,
},
{
year: "2010",
month: "May",
temperature: 10.9,
},
{
year: "2010",
month: "Jun",
temperature: 15.2,
},
{
year: "2010",
month: "Jul",
temperature: 16.2,
},
{
year: "2010",
month: "Aug",
temperature: 14.9,
},
{
year: "2010",
month: "Sep",
temperature: 13.4,
},
{
year: "2010",
month: "Oct",
temperature: 9.5,
},
{
year: "2010",
month: "Nov",
temperature: 4.9,
},
{
year: "2010",
month: "Dec",
temperature: 0.4,
},
{
year: "2011",
month: "Jan",
temperature: 3.9,
},
{
year: "2011",
month: "Feb",
temperature: 6,
},
{
year: "2011",
month: "Mar",
temperature: 6.6,
},
{
year: "2011",
month: "Apr",
temperature: 12,
},
{
year: "2011",
month: "May",
temperature: 12,
},
{
year: "2011",
month: "Jun",
temperature: 14.2,
},
{
year: "2011",
month: "Jul",
temperature: 15.8,
},
{
year: "2011",
month: "Aug",
temperature: 15.8,
},
{
year: "2011",
month: "Sep",
temperature: 14.9,
},
{
year: "2011",
month: "Oct",
temperature: 12.2,
},
{
year: "2011",
month: "Nov",
temperature: 8.9,
},
{
year: "2011",
month: "Dec",
temperature: 5.4,
},
{
year: "2012",
month: "Jan",
temperature: 5.1,
},
{
year: "2012",
month: "Feb",
temperature: 4.5,
},
{
year: "2012",
month: "Mar",
temperature: 8.6,
},
{
year: "2012",
month: "Apr",
temperature: 6.7,
},
{
year: "2012",
month: "May",
temperature: 11.6,
},
{
year: "2012",
month: "Jun",
temperature: 13.4,
},
{
year: "2012",
month: "Jul",
temperature: 15.5,
},
{
year: "2012",
month: "Aug",
temperature: 16.2,
},
{
year: "2012",
month: "Sep",
temperature: 12.7,
},
{
year: "2012",
month: "Oct",
temperature: 8.8,
},
{
year: "2012",
month: "Nov",
temperature: 6.1,
},
{
year: "2012",
month: "Dec",
temperature: 4.2,
},
{
year: "2013",
month: "Jan",
temperature: 3.4,
},
{
year: "2013",
month: "Feb",
temperature: 2.7,
},
{
year: "2013",
month: "Mar",
temperature: 1.7,
},
{
year: "2013",
month: "Apr",
temperature: 7.4,
},
{
year: "2013",
month: "May",
temperature: 10.6,
},
{
year: "2013",
month: "Jun",
temperature: 14.1,
},
{
year: "2013",
month: "Jul",
temperature: 18.4,
},
{
year: "2013",
month: "Aug",
temperature: 16.8,
},
{
year: "2013",
month: "Sep",
temperature: 13.3,
},
{
year: "2013",
month: "Oct",
temperature: 11.7,
},
{
year: "2013",
month: "Nov",
temperature: 6.2,
},
{
year: "2013",
month: "Dec",
temperature: 6.3,
},
{
year: "2014",
month: "Jan",
temperature: 5,
},
{
year: "2014",
month: "Feb",
temperature: 5.6,
},
{
year: "2014",
month: "Mar",
temperature: 7.4,
},
{
year: "2014",
month: "Apr",
temperature: 10.1,
},
{
year: "2014",
month: "May",
temperature: 12.2,
},
{
year: "2014",
month: "Jun",
temperature: 15.3,
},
{
year: "2014",
month: "Jul",
temperature: 17.9,
},
{
year: "2014",
month: "Aug",
temperature: 14.9,
},
{
year: "2014",
month: "Sep",
temperature: 14.4,
},
{
year: "2014",
month: "Oct",
temperature: 11.4,
},
{
year: "2014",
month: "Nov",
temperature: 7.8,
},
{
year: "2014",
month: "Dec",
temperature: 5.2,
},
{
year: "2015",
month: "Jan",
temperature: 4.1,
},
{
year: "2015",
month: "Feb",
temperature: 3.8,
},
{
year: "2015",
month: "Mar",
temperature: 5.9,
},
{
year: "2015",
month: "Apr",
temperature: 9.1,
},
{
year: "2015",
month: "May",
temperature: 10.6,
},
{
year: "2015",
month: "Jun",
temperature: 13.9,
},
{
year: "2015",
month: "Jul",
temperature: 15.7,
},
{
year: "2015",
month: "Aug",
temperature: 15.8,
},
{
year: "2015",
month: "Sep",
temperature: 12.2,
},
{
year: "2015",
month: "Oct",
temperature: 10.2,
},
{
year: "2015",
month: "Nov",
temperature: 8.7,
},
{
year: "2015",
month: "Dec",
temperature: 8.6,
},
{
year: "2016",
month: "Jan",
temperature: 4.8,
},
{
year: "2016",
month: "Feb",
temperature: 4.2,
},
{
year: "2016",
month: "Mar",
temperature: 5.5,
},
{
year: "2016",
month: "Apr",
temperature: 7,
},
{
year: "2016",
month: "May",
temperature: 11.8,
},
{
year: "2016",
month: "Jun",
temperature: 14.6,
},
{
year: "2016",
month: "Jul",
temperature: 16.6,
},
{
year: "2016",
month: "Aug",
temperature: 16.6,
},
{
year: "2016",
month: "Sep",
temperature: 15.4,
},
{
year: "2016",
month: "Oct",
temperature: 10.2,
},
{
year: "2016",
month: "Nov",
temperature: 5.4,
},
{
year: "2016",
month: "Dec",
temperature: 6.3,
},
{
year: "2017",
month: "Jan",
temperature: 3.9,
},
{
year: "2017",
month: "Feb",
temperature: 5.2,
},
{
year: "2017",
month: "Mar",
temperature: 8,
},
{
year: "2017",
month: "Apr",
temperature: 8.6,
},
{
year: "2017",
month: "May",
temperature: 12.8,
},
{
year: "2017",
month: "Jun",
temperature: 15.7,
},
{
year: "2017",
month: "Jul",
temperature: 16.4,
},
{
year: "2017",
month: "Aug",
temperature: 15.2,
},
{
year: "2017",
month: "Sep",
temperature: 13,
},
{
year: "2017",
month: "Oct",
temperature: 11.9,
},
{
year: "2017",
month: "Nov",
temperature: 6.5,
},
{
year: "2017",
month: "Dec",
temperature: 4.7,
},
{
year: "2018",
month: "Jan",
temperature: 4.4,
},
{
year: "2018",
month: "Feb",
temperature: 2.3,
},
{
year: "2018",
month: "Mar",
temperature: 3.7,
},
{
year: "2018",
month: "Apr",
temperature: 8.8,
},
{
year: "2018",
month: "May",
temperature: 13.8,
},
{
year: "2018",
month: "Jun",
temperature: 16.4,
},
{
year: "2018",
month: "Jul",
temperature: 19.5,
},
{
year: "2018",
month: "Aug",
temperature: 17,
},
{
year: "2018",
month: "Sep",
temperature: 13.4,
},
{
year: "2018",
month: "Oct",
temperature: 10.3,
},
{
year: "2018",
month: "Nov",
temperature: 7.4,
},
{
year: "2018",
month: "Dec",
temperature: 6.4,
},
{
year: "2019",
month: "Jan",
temperature: 4.4,
},
{
year: "2019",
month: "Feb",
temperature: 6.9,
},
{
year: "2019",
month: "Mar",
temperature: 7.5,
},
{
year: "2019",
month: "Apr",
temperature: 8.9,
},
{
year: "2019",
month: "May",
temperature: 11.5,
},
{
year: "2019",
month: "Jun",
temperature: 14.1,
},
{
year: "2019",
month: "Jul",
temperature: 17.8,
},
{
year: "2019",
month: "Aug",
temperature: 17.1,
},
{
year: "2019",
month: "Sep",
temperature: 13.7,
},
{
year: "2019",
month: "Oct",
temperature: 9.2,
},
{
year: "2019",
month: "Nov",
temperature: 5.4,
},
{
year: "2019",
month: "Dec",
temperature: 5.4,
},
{
year: "2020",
month: "Jan",
temperature: 6.4,
},
{
year: "2020",
month: "Feb",
temperature: 5.6,
},
{
year: "2020",
month: "Mar",
temperature: 6.3,
},
{
year: "2020",
month: "Apr",
temperature: 10.3,
},
{
year: "2020",
month: "May",
temperature: 12.8,
},
{
year: "2020",
month: "Jun",
temperature: 15,
},
{
year: "2020",
month: "Jul",
temperature: 15.6,
},
{
year: "2020",
month: "Aug",
temperature: 17.2,
},
{
year: "2020",
month: "Sep",
temperature: 13.7,
},
{
year: "2020",
month: "Oct",
temperature: 9.8,
},
{
year: "2020",
month: "Nov",
temperature: 8.1,
},
{
year: "2020",
month: "Dec",
temperature: 4.6,
},
{
year: "2021",
month: "Jan",
temperature: 2.8,
},
{
year: "2021",
month: "Feb",
temperature: 4.3,
},
{
year: "2021",
month: "Mar",
temperature: 7.2,
},
{
year: "2021",
month: "Apr",
temperature: 6.5,
},
{
year: "2021",
month: "May",
temperature: 10,
},
{
year: "2021",
month: "Jun",
temperature: 16.1,
},
{
year: "2021",
month: "Jul",
temperature: 18.4,
},
{
year: "2021",
month: "Aug",
temperature: 16.1,
},
{
year: "2021",
month: "Sep",
temperature: 16.2,
},
{
year: "2021",
month: "Oct",
temperature: 11.6,
},
{
year: "2021",
month: "Nov",
temperature: 7.7,
},
{
year: "2021",
month: "Dec",
temperature: 5.4,
},
{
year: "2022",
month: "Jan",
temperature: 5.2,
},
{
year: "2022",
month: "Feb",
temperature: 6.1,
},
{
year: "2022",
month: "Mar",
temperature: 7.4,
},
{
year: "2022",
month: "Apr",
temperature: 9.2,
},
{
year: "2022",
month: "May",
temperature: 13.3,
},
{
year: "2022",
month: "Jun",
temperature: 15.5,
},
{
year: "2022",
month: "Jul",
temperature: 18.5,
},
{
year: "2022",
month: "Aug",
temperature: 18.4,
},
{
year: "2022",
month: "Sep",
temperature: 14.5,
},
{
year: "2022",
month: "Oct",
temperature: 12.1,
},
{
year: "2022",
month: "Nov",
temperature: 8.4,
},
{
year: "2022",
month: "Dec",
temperature: 3.6,
},
];
}
{
gradientLegend: {
enabled: true,
},
}For position, size, and label customisation options, see the Colour Scale page.
Heatmap Chart Examples Copy Link
See more Heatmap Chart examples in the AG Charts Gallery.
Heatmap Chart Example
Heatmap Chart with Labels Example
Heatmap Chart with Grouped Category Axis Example
Calendar Heatmap Chart Example
API Reference Copy Link
Properties available on the AgHeatmapSeriesOptions interface.
- type required
'heatmap' - Configuration for the Heatmap Series.
- xKey required
DatumKey - The key to use to retrieve x-values from the data.
- yKey required
DatumKey - The key to use to retrieve y-values from the data.
- id
stringdefault: auto-generated value - Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
- context
ContextDefault - Context object to use in callbacks.
- data
DatumDefault[] - The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
- visible
boolean - Whether to display the series.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- highlight
AgHighlightOptions - Configuration for highlighting when a series or legend item is hovered over.
- selection
AgSelectionOptions - Configuration for data selection.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- xKeyAxis
stringdefault: 'x' - The key of the x-axis to which this series is bound.
- yKeyAxis
stringdefault: 'y' - The key of the y-axis to which this series is bound.
- colorKey
DatumKey - The name of the node key containing the colour value. This value (along with `colorScale` config) will be used to determine the cell colour.
- xName
string - A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- yName
string - A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- colorName
string - A human-readable description of the colour values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- label
AgHeatmapSeriesLabelOptions - Options for the label in each cell.
- itemPadding
PixelSize - Minimum distance between the label text and the edges of the cell.
- cornerRadius
PixelSizedefault: 0 - The corner radius applied to every cell. The chart background shows through the area cut away by the rounded corners.
- title
string - The title to use for the series. Defaults to `yName` if it exists, or `yKey` if not.
- itemStyler
Styler - Function used to return formatting for individual heatmap cells, based on the given parameters.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- colorScale
AgColorScale - Configuration for colour scale with fills, domain, and mode.
- stroke
AgCssColorOrRef - The colour for the stroke.
- strokeWidth
PixelSize - The width of the stroke in pixels.
- strokeOpacity
Opacity - The opacity of the stroke colour.
- showInMiniChart
boolean - Whether to include the series in the Mini Chart.
Properties available on the AgHeatmapSeriesOptions interface.
- type required
'heatmap' - Configuration for the Heatmap Series.
- xKey required
DatumKey - The key to use to retrieve x-values from the data.
- yKey required
DatumKey - The key to use to retrieve y-values from the data.
- id
stringdefault: auto-generated value - Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
- context
ContextDefault - Context object to use in callbacks.
- data
DatumDefault[] - The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
- visible
boolean - Whether to display the series.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- highlight
AgHighlightOptions - Configuration for highlighting when a series or legend item is hovered over.
- selection
AgSelectionOptions - Configuration for data selection.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- xKeyAxis
stringdefault: 'x' - The key of the x-axis to which this series is bound.
- yKeyAxis
stringdefault: 'y' - The key of the y-axis to which this series is bound.
- colorKey
DatumKey - The name of the node key containing the colour value. This value (along with `colorScale` config) will be used to determine the cell colour.
- xName
string - A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- yName
string - A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- colorName
string - A human-readable description of the colour values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
- label
AgHeatmapSeriesLabelOptions - Options for the label in each cell.
- itemPadding
PixelSize - Minimum distance between the label text and the edges of the cell.
- cornerRadius
PixelSizedefault: 0 - The corner radius applied to every cell. The chart background shows through the area cut away by the rounded corners.
- title
string - The title to use for the series. Defaults to `yName` if it exists, or `yKey` if not.
- itemStyler
Styler - Function used to return formatting for individual heatmap cells, based on the given parameters.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- colorScale
AgColorScale - Configuration for colour scale with fills, domain, and mode.
- stroke
AgCssColorOrRef - The colour for the stroke.
- strokeWidth
PixelSize - The width of the stroke in pixels.
- strokeOpacity
Opacity - The opacity of the stroke colour.
- showInMiniChart
boolean - Whether to include the series in the Mini Chart.
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.