Skip to content
amCharts 5

A custom "heat legend" using a gradient

This demo adds a Container element with a gradient-filled rectangle and some labels to create a custom “heat legend” using multi-color steps.

The code

Section titled “The code”
let legend = chart.children.push(am5.Container.new(root, {
  width: am5.p100,
  height: 100,
  layout: root.verticalLayout
}));


let gradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0xca0101), offset: 0 },
    { color: am5.color(0xca0101), offset: 0.2 },
    { color: am5.color(0xe17a2d), offset: 0.2 },
    { color: am5.color(0xe17a2d), offset: 0.4 },
    { color: am5.color(0xe1d92d), offset: 0.4 },
    { color: am5.color(0xe1d92d), offset: 0.6 },
    { color: am5.color(0x5dbe24), offset: 0.6 },
    { color: am5.color(0x5dbe24), offset: 0.8 },
    { color: am5.color(0x0b7d03), offset: 0.8 },
    { color: am5.color(0x0b7d03), offset: 1 }
  ],
  rotation: 0
});


let labels = legend.children.push(am5.Container.new(root, {
  width: am5.p100
}))


let fromLabel = labels.children.push(am5.Label.new(root, {
  text: "Critical"
}))


let toLabel = labels.children.push(am5.Label.new(root, {
  text: "Perfect",
  x: am5.p100,
  centerX: am5.p100
}))


let bar = legend.children.push(am5.Rectangle.new(root, {
  width: am5.p100,
  height: 40,
  fillGradient: gradient,
  fillOpacity: 1
}));
Section titled “Related docs”

The demo

Section titled “The demo”
Open in CodePen