Skip to main content

​
Overview

The Slice class draws a slice shape, commonly used in pie and donut charts. It extends the Graphics base class and provides properties for controlling radius, arc, angles, and more.

​
Class Definition

export class Slice extends Graphics

​
Settings Interface

export interface ISliceSettings extends IGraphicsSettings

​
Properties

​
radius
number
Radius in pixels.This defines the outer radius of the slice.
​
arc
number
Slice “width” in degrees.The angular width of the slice. For example, 90 degrees creates a quarter circle.
​
innerRadius
number
Inner radius of the slice in pixels.Set this to create a donut-style slice. A value of 0 creates a pie slice.
​
startAngle
number
Start angle in degrees.The angle at which the slice begins. 0 degrees is at the top (12 o’clock position).
​
cornerRadius
number
Slice corner radius in pixels.Rounds the corners of the slice edges.
​
shiftRadius
number
Slice “pull out” radius in pixels.Use this to pull a slice out from the center (exploded slice effect).
​
dRadius
number
Number of pixels to add to whatever slice’s radius value is.Negative numbers can also be used. This is useful for relative adjustments.
​
dInnerRadius
number
Number of pixels to add to whatever slice’s innerRadius value is.Negative numbers can also be used. This is useful for relative adjustments.

​
Public Properties

​
ix
number
The x component of the slice’s middle angle direction vector.This is calculated automatically and used for positioning tooltips and applying shift radius.
​
iy
number
The y component of the slice’s middle angle direction vector.This is calculated automatically and used for positioning tooltips and applying shift radius.

​
Inherited Properties

As Slice extends Graphics, it inherits all graphics properties including:
​
fill
Color
Fill color.Learn more about colors, gradients and patterns
​
stroke
Color
Stroke (border) color.Learn more about colors, gradients and patterns
​
strokeWidth
number
Width of the stroke (border) in pixels.
​
fillOpacity
number
Opacity of the fill. 0 - fully transparent; 1 - fully opaque.
​
strokeOpacity
number
Opacity of the stroke (border). 0 - fully transparent; 1 - fully opaque.
​
fillPattern
Pattern
Fill pattern.Learn more about patterns
​
strokePattern
Pattern
Stroke (border) pattern.Learn more about patterns
​
fillGradient
Gradient
Fill gradient.Learn more about gradients
​
strokeGradient
Gradient
Stroke (border) gradient.Learn more about gradients
​
strokeDasharray
number[] | number
Stroke (border) dash settings.Learn more about dashed lines
​
strokeDashoffset
number
Stroke (border) dash offset.Learn more about dashed lines
​
shadowColor
Color | null
Color of the element’s shadow.For this to work at least one of the following needs to be set as well: shadowBlur, shadowOffsetX, shadowOffsetY.Learn more about shadows
​
shadowBlur
number
Blurriness of the shadow. The bigger the number, the more blurry shadow will be.Learn more about shadows
​
shadowOffsetX
number
Horizontal shadow offset in pixels.Learn more about shadows
​
shadowOffsetY
number
Vertical shadow offset in pixels.Learn more about shadows
​
shadowOpacity
number
Opacity of the shadow (0-1).If not set, will use the same as fillOpacity of the element.Learn more about shadows

​
Example Usage

​
Pie Slice

import { Slice } from "@amcharts/amcharts5";

// Create a pie slice (quarter circle)
let pieSlice = Slice.new(root, {
  radius: 100,
  startAngle: 0,
  arc: 90,
  innerRadius: 0,
  fill: am5.color(0xff0000),
  stroke: am5.color(0xffffff),
  strokeWidth: 2
});

​
Donut Slice

// Create a donut slice
let donutSlice = Slice.new(root, {
  radius: 100,
  innerRadius: 60,
  startAngle: 90,
  arc: 120,
  fill: am5.color(0x0000ff),
  cornerRadius: 5
});

​
Exploded Slice

// Create an exploded slice (pulled out from center)
let explodedSlice = Slice.new(root, {
  radius: 100,
  innerRadius: 50,
  startAngle: 0,
  arc: 60,
  shiftRadius: 20,
  fill: am5.color(0x00ff00)
});

​
Dynamic Radius Adjustment

// Create a slice with dynamic radius adjustment
let dynamicSlice = Slice.new(root, {
  radius: 100,
  innerRadius: 60,
  startAngle: 0,
  arc: 45,
  dRadius: 10,  // Adds 10px to radius
  dInnerRadius: -5,  // Subtracts 5px from innerRadius
  fill: am5.color(0xff00ff)
});

​
Notes

  • The slice uses the d3-shape arc generator internally for rendering.
  • If innerRadius is negative, it’s treated as relative to the outer radius.
  • The shiftRadius property automatically updates the dx and dy properties to shift the slice outward from the center.
  • Full circle (360 degrees) with innerRadius of 0 is treated specially for tooltip positioning.
  • The corner radius is only applied when the arc is greater than 0.1 degrees to avoid rendering issues.

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us