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

TypeScript

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
}));

JavaScript

var legend = chart.children.push(am5.Container.new(root, {
  width: am5.p100,
  height: 100,
  layout: root.verticalLayout
}));

var 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
});

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

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

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

var bar = legend.children.push(am5.Rectangle.new(root, {
  width: am5.p100,
  height: 40,
  fillGradient: gradient,
  fillOpacity: 1
}));

Related docs

• Gradients
• Containers
• Labels

The demo

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

A chart with custom "heat legend" using a gradienta-chart-with-custom-heat-legend-using-a-gradient