Format - Steema/TeeChartJS GitHub Wiki

Most objects (like Series, Annotations and chart sub-objects) include a format property to group all visual attributes in a common place.

The Format class provides the following properties:

'fill' (Color)

A color in css string format. For example: #123456, rgb(255,0,0), rgba(0,255,0,0.5) or “blue”

Chart1.panel.format.fill = “blue”;

round (Point class)

Amount in pixels of roundness of rectangle corners (x: horizontal, y: vertical)

Chart1.panel.format.round = { x:10, y:10 }
Chart1.legend.format.round.y = 5;

transparency (Number)

Amount of semi-glass effect, from 0 to 1. (default is zero)

Chart1.legend.format.transparency = 0.5;

shadow (Shadow class)

Properties to control drop-shadow visibility behind filled shapes or stroked lines.

var s = Chart1.panel.format.shadow;
s.visible = true;
s.width = 4;  // can be negative for left-side shadow
s.height = 4; // can be negative for top-side shadow
s.blur = 5;
s.color = “silver”;

gradient (Gradient class)

Attributes to fill shapes using a gradient of colors:

var g = Chart1.panel.format.gradient;
g.visible = true;
g.colors = [ “red”, “yellow”, “green” ];  // array of colors
g.stops = [ 0, 0.1, 1 ];                  // percentages from 0 to 1 for each color (default is null, automatic)
g.direction = “topbottom”;                // “bottomtop”, “leftright”, “rightleft”, “radial”, “diagonalup”, “diagonaldown”

stroke (Stroke class)

Attributes used to draw lines and outlines around filled shapes:

var s = Chart1.panel.format.stroke;
s.fill = “black”;
s.size = 4;                 // line thickness
s.join = “round”;           // segment joins (“round”, “miter”, “bevel” )
s.cap = “square”;           // ending line terminators (“square”, “butt”, “round” )
s.dash = [ 5,10 ];          // dot-dash... array of pixels (default is null to draw solid lines)
s.gradient.visible = true;  // gradient object with colors, direction, etc

font (Font class)

Properties to display text:

var f = Chart1.title.format.font;
f.style = “22px Verdana”;   // or: “bold italic 14px Tahoma”, etc
f.fill = “blue”;
f.shadow.visible = true;    // text drop-shadow
f.stroke.fill = “white”;    // draws an outline around text
f.gradient.visible = true;  // fills text with gradient instead of using font.fill
f.textAlign = “center”;     // horizontal alignment: “start”, “end”, “left”, “center”, “right”
                            // vertical alignment: “top”, “middle”, “bottom”, “alphabetic”, “hanging”, “ideographic”
f.baseLine = “top”;