How to use the Column sparkline type
The SparklineType.Column enum value is used to configure the Sparkline component to display the data as a series of vertical columns or bars, arranged horizontally.
⚠️ Beta Notice: This component is still quite new. Some APIs may go through minor changes in upcoming releases.
The Basics
Create a Sparkline control, set its type to SparklineType.Column, and add it to the the display list.
var sparkline = new Sparkline();
sparkline.type = Column;
addChild(sparkline);
Data Provider
To render some data in the sparkline, pass in a collection that contains separate value for each column.
sparkline.dataProvider = new ArrayCollection([
5.0, 2.1, 4.0, 3.2, 6.0, 5.4, 2.0, 5.0, 3.6, 2.5
]);
Customizing Columns
A number of properties may be used to change the appearance of columns on the line.
Column Size and Spacing
To customize the width of the columns that are shown, set the columnWidth property.
sparkline.columnWidth = 4.0;
To customize the horizontal spacing between columns, set the columnGap property.
sparkline.columnGap = 2.0;
Column Colors
The maxColor and minColor properties may optionally customize the color of the columns that have the highest and lowest values compared to all other items in the data provider.
sparkline.maxColor = 0x00cc00;
sparkline.minColor = 0xcc0000;
The negativeColor property may optionally customize the color of the columns that have negative values (values less than zero (< 0.0)).
sparkline.negativeColor = 0xcc0000;
Set the itemToColor() method to customize the color of each individual column.
final colors:Array<UInt> = [
0x881177, 0xaa3355, 0xcc6666, 0xee9944, 0xeedd00, 0x99dd55,
0x44dd88, 0x22ccbb, 0x00bbcc, 0x0099cc, 0x3366bb, 0x663399
];
sparkline.itemToColor = function(item:Float, index:Int):Null<UInt> {
return colors[index % colors.length];
}