The Percent class represents a relative value (percentage) in amCharts 5. It is used throughout the library for properties that accept percentage values.
Creating Percent Objects
percent()
function percent(value: number): Percent
Percent value (e.g., 80 for 80%)
import * as am5 from "@amcharts/amcharts5";
pieSeries.set("radius", am5.percent(80));
column.set("width", am5.percent(50));
Shortcuts
For common percentage values, amCharts 5 provides convenient shortcuts:
A shortcut for percent(0) (0%).
p50
A shortcut for percent(50) (50%).
p100
A shortcut for percent(100) (100%).
Example:
import * as am5 from "@amcharts/amcharts5";
series.set("fillOpacity", am5.p50); // 50% opacity
container.set("width", am5.p100); // 100% width
Percent Class
Constructor
new Percent(percent: number)
Percent value (e.g., 50 for 50%)
const halfWidth = new am5.Percent(50);
Properties
value
Relative value where 100% = 1, 50% = 0.5, etc. This is useful to apply transformations to other values.
let totalValue = 256;
let percent = am5.p50;
console.log(totalValue * percent.value); // outputs 128
percent
Value in percent (e.g., 50 for 50%).
let p = am5.percent(75);
console.log(p.percent); // outputs 75
Methods
toString()
Returns string representation of the percent value.
String representation (e.g., “50%”)
let p = am5.percent(80);
console.log(p.toString()); // "80%"
interpolate()
interpolate(min: number, max: number): number
let p = am5.percent(50);
let value = p.interpolate(0, 100); // returns 50
let value2 = p.interpolate(100, 200); // returns 150
Static Methods
Percent.normalize()
static normalize(
percent: Percent | number,
min: number,
max: number
): Percent
Minimum value of the range
Maximum value of the range
Normalized Percent object
// Convert 150 to a percentage within 100-200 range
let p = am5.Percent.normalize(150, 100, 200); // 50%
// Pass through existing Percent
let p2 = am5.Percent.normalize(am5.p50, 0, 100); // 50%
Utility Functions
isPercent()
function isPercent(value: any): boolean
True if value is a Percent object
let p = am5.percent(50);
console.log(am5.isPercent(p)); // true
console.log(am5.isPercent(50)); // false
Usage Examples
Setting Element Dimensions
import * as am5 from "@amcharts/amcharts5";
// Set a column to be 80% of available width
column.set("width", am5.percent(80));
// Set height to 100%
container.set("height", am5.p100);
Positioning Elements
// Position label at 50% from the left
label.set("x", am5.p50);
label.set("centerX", am5.p50);
// Position at bottom right corner
element.set("x", am5.p100);
element.set("y", am5.p100);
Calculating Values
let width = 500;
let halfWidth = width * am5.p50.value; // 250
let customPercent = am5.percent(75);
let threeQuarters = width * customPercent.value; // 375