Gradients - amCharts 5

Overview

Gradients in amCharts 5 allow you to fill chart elements with smooth color transitions instead of solid colors. The library provides two types of gradients: linear gradients (straight color transitions) and radial gradients (circular color transitions).

Linear Gradients

Basic Linear Gradient

Create a linear gradient with color stops:

import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";

const gradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0xff0000) },  // Red at start
    { color: am5.color(0x0000ff) }   // Blue at end
  ],
  rotation: 90  // Vertical gradient (top to bottom)
});

const series = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    categoryXField: "category"
  })
);

series.columns.template.set("fillGradient", gradient);

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/LinearGradient.ts:31-112

Gradient Rotation

Control the direction of the gradient using the rotation property (in degrees):

// Horizontal gradient (left to right)
const horizontalGradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0x3366cc) },
    { color: am5.color(0x6bcf7f) }
  ],
  rotation: 0
});

// Vertical gradient (top to bottom)
const verticalGradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0xff6b6b) },
    { color: am5.color(0xffd93d) }
  ],
  rotation: 90
});

// Diagonal gradient
const diagonalGradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0x9b59b6) },
    { color: am5.color(0x3498db) }
  ],
  rotation: 45
});

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/LinearGradient.ts:12-20

Multiple Color Stops

Add multiple color stops for complex gradients:

const multiColorGradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0xff0000), offset: 0 },     // Red at 0%
    { color: am5.color(0xffff00), offset: 0.33 },  // Yellow at 33%
    { color: am5.color(0x00ff00), offset: 0.66 },  // Green at 66%
    { color: am5.color(0x0000ff), offset: 1 }      // Blue at 100%
  ],
  rotation: 90
});

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/LinearGradient.ts:74-108

Radial Gradients

Basic Radial Gradient

Create a radial gradient that radiates from a center point:

const radialGradient = am5.RadialGradient.new(root, {
  stops: [
    { color: am5.color(0xffffff) },  // White at center
    { color: am5.color(0x3366cc) }   // Blue at edge
  ]
});

const series = chart.series.push(
  am5percent.PieSeries.new(root, {
    valueField: "value",
    categoryField: "category"
  })
);

series.slices.template.set("fillGradient", radialGradient);

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/RadialGradient.ts:40-126

Positioning Radial Gradients

Control the center position of the gradient:

// Gradient centered at custom position
const positionedGradient = am5.RadialGradient.new(root, {
  stops: [
    { color: am5.color(0xffff00) },
    { color: am5.color(0xff0000) }
  ],
  x: am5.percent(30),   // 30% from left
  y: am5.percent(30)    // 30% from top
});

// Gradient centered (default)
const centeredGradient = am5.RadialGradient.new(root, {
  stops: [
    { color: am5.color(0xffffff) },
    { color: am5.color(0x000000) }
  ],
  x: am5.percent(50),
  y: am5.percent(50)
});

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/RadialGradient.ts:20-29

Custom Radius

const customRadiusGradient = am5.RadialGradient.new(root, {
  stops: [
    { color: am5.color(0xff6b6b) },
    { color: am5.color(0x4ecdc4) }
  ],
  radius: am5.percent(80)  // 80% of available space
});

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/RadialGradient.ts:15-18

Gradient Stops

Color Stop Properties

Each gradient stop can have multiple properties:

const gradient = am5.LinearGradient.new(root, {
  stops: [
    {
      color: am5.color(0xff0000),
      offset: 0,           // Position (0 to 1)
      opacity: 1,          // Opacity (0 to 1)
      lighten: 0,          // Lighten amount
      brighten: 0          // Brighten amount
    },
    {
      color: am5.color(0x0000ff),
      offset: 1,
      opacity: 0.8,
      lighten: 0.2
    }
  ],
  rotation: 90
});

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/LinearGradient.ts:85-106

Automatic Offset Calculation

If you don’t specify offsets, they’re calculated automatically:

// Stops will be evenly spaced: 0%, 33.3%, 66.6%, 100%
const autoGradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0xff0000) },
    { color: am5.color(0x00ff00) },
    { color: am5.color(0x0000ff) },
    { color: am5.color(0xffff00) }
  ]
});

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/LinearGradient.ts:79-83

Opacity in Stops

const fadeGradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0x3366cc), opacity: 1 },      // Fully opaque
    { color: am5.color(0x3366cc), opacity: 0 }       // Fully transparent
  ],
  rotation: 90
});

series.fills.template.setAll({
  fillGradient: fadeGradient,
  visible: true
});

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/LinearGradient.ts:85-89

Color Manipulation in Stops

Lighten or brighten colors within the gradient:

const manipulatedGradient = am5.LinearGradient.new(root, {
  stops: [
    {
      color: am5.color(0x3366cc),
      lighten: 0.3    // Lighten by 30%
    },
    {
      color: am5.color(0x3366cc),
      brighten: -0.3  // Darken by 30%
    }
  ],
  rotation: 90
});

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/LinearGradient.ts:95-103

Applying Gradients

To Series Fill

const series = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    categoryXField: "category"
  })
);

const gradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0x297373) },
    { color: am5.color(0x6bcf7f) }
  ],
  rotation: 90
});

series.columns.template.set("fillGradient", gradient);

To Series Stroke

const strokeGradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0xff0000) },
    { color: am5.color(0x0000ff) }
  ],
  rotation: 0
});

series.strokes.template.set("strokeGradient", strokeGradient);

To Labels

Apply gradients to text labels (since v5.10.1):

const label = am5.Label.new(root, {
  text: "Gradient Text",
  fontSize: 48,
  fillGradient: am5.LinearGradient.new(root, {
    stops: [
      { color: am5.color(0xff6b6b) },
      { color: am5.color(0x4ecdc4) }
    ],
    rotation: 0
  })
});

Source: /home/daytona/workspace/source/src/.internal/core/render/Label.ts:37-42

To Backgrounds

const container = root.container.children.push(
  am5.Container.new(root, {
    width: am5.percent(100),
    height: am5.percent(100),
    background: am5.RoundedRectangle.new(root, {
      fillGradient: am5.LinearGradient.new(root, {
        stops: [
          { color: am5.color(0x667eea) },
          { color: am5.color(0x764ba2) }
        ],
        rotation: 135
      })
    })
  })
);

Gradient Targets

Setting a Gradient Target

Make gradients span across multiple elements:

const container = root.container.children.push(
  am5.Container.new(root, {
    layout: root.horizontalLayout
  })
);

const gradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0xff0000) },
    { color: am5.color(0x0000ff) }
  ],
  target: container  // Gradient spans entire container
});

// Multiple children will share the same gradient
for (let i = 0; i < 5; i++) {
  container.children.push(
    am5.Rectangle.new(root, {
      width: 100,
      height: 100,
      fillGradient: gradient
    })
  );
}

Source: /home/daytona/workspace/source/src/.internal/core/render/gradients/Gradient.ts:17-21

Combining with Other Effects

Gradient with Opacity

series.columns.template.setAll({
  fillGradient: am5.LinearGradient.new(root, {
    stops: [
      { color: am5.color(0x3366cc) },
      { color: am5.color(0x6bcf7f) }
    ],
    rotation: 90
  }),
  fillOpacity: 0.7  // Apply overall opacity
});

Gradient with Stroke

series.columns.template.setAll({
  fillGradient: am5.LinearGradient.new(root, {
    stops: [
      { color: am5.color(0xff6b6b) },
      { color: am5.color(0xffd93d) }
    ],
    rotation: 90
  }),
  stroke: am5.color(0x000000),
  strokeWidth: 2
});

Dynamic Gradients

Changing Gradients Based on Data

series.columns.template.adapters.add("fillGradient", (gradient, target) => {
  const dataItem = target.dataItem;
  if (dataItem) {
    const value = dataItem.get("valueY");
    
    if (value > 100) {
      return am5.LinearGradient.new(root, {
        stops: [
          { color: am5.color(0x00ff00) },
          { color: am5.color(0x00aa00) }
        ],
        rotation: 90
      });
    } else {
      return am5.LinearGradient.new(root, {
        stops: [
          { color: am5.color(0xff0000) },
          { color: am5.color(0xaa0000) }
        ],
        rotation: 90
      });
    }
  }
  return gradient;
});

Animated Gradients

Animate gradient rotation:

const gradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0x667eea) },
    { color: am5.color(0x764ba2) }
  ],
  rotation: 0
});

// Animate rotation
gradient.animate({
  key: "rotation",
  to: 360,
  duration: 5000,
  loops: Infinity
});

series.columns.template.set("fillGradient", gradient);

Best Practices

Limit Color Stops

Use 2-4 color stops for optimal performance:

// Good: Simple gradient
const gradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0x3366cc) },
    { color: am5.color(0x6bcf7f) }
  ]
});

// Avoid: Too many stops
// const gradient = am5.LinearGradient.new(root, {
//   stops: [/* 20 different color stops */]
// });

Reuse Gradient Instances

Create gradients once and reuse them across multiple elements:

const sharedGradient = am5.LinearGradient.new(root, {
  stops: [
    { color: am5.color(0xff0000) },
    { color: am5.color(0x0000ff) }
  ],
  rotation: 90
});

series1.columns.template.set("fillGradient", sharedGradient);
series2.columns.template.set("fillGradient", sharedGradient);

Consider Direction

Match gradient direction to data flow:

// For vertical bar charts, use vertical gradients
const verticalGradient = am5.LinearGradient.new(root, {
  stops: [/* ... */],
  rotation: 90  // Top to bottom
});

// For horizontal bar charts, use horizontal gradients
const horizontalGradient = am5.LinearGradient.new(root, {
  stops: [/* ... */],
  rotation: 0  // Left to right
});

Use Radial for Circular Charts

Radial gradients work best with pie charts and gauge charts:

const radialGradient = am5.RadialGradient.new(root, {
  stops: [
    { color: am5.color(0xffffff) },
    { color: am5.color(0x3366cc) }
  ]
});

pieSeries.slices.template.set("fillGradient", radialGradient);

Colors

Learn about color manipulation and color sets

Patterns

Apply repeating patterns instead of gradients

Getting Started

Core Concepts

Chart Types

XY Charts

Map Charts

Stock Charts

Customization

Data

Plugins

Advanced

​Overview

​Linear Gradients

​Basic Linear Gradient

​Gradient Rotation

​Multiple Color Stops

​Radial Gradients

​Basic Radial Gradient

​Positioning Radial Gradients

​Custom Radius

​Gradient Stops

​Color Stop Properties

​Automatic Offset Calculation

​Opacity in Stops

​Color Manipulation in Stops

​Applying Gradients

​To Series Fill

​To Series Stroke

​To Labels

​To Backgrounds

​Gradient Targets

​Setting a Gradient Target

​Combining with Other Effects

​Gradient with Opacity

​Gradient with Stroke

​Dynamic Gradients

​Changing Gradients Based on Data

​Animated Gradients

​Best Practices

​Related