Home › User Guide › Strokes

Strokes

: Stroke Width; Dash Patterns; Line Shapes

Line and border strokes are defined in xmCHART by a list of numbers. The first value defines the stroke width, followed by an optional dash pattern. A dash pattern is defined by a sequence of successive on (dash) and off (gap) segments of variable lengths.

strokeWidth dashLength1 gapLength1 dashLength2 gapLength2 ...

Stroke Width

The stroke width can be controlled by the first element of the argument stroke. The argument stroke is part of numerous xmCHART functions. For example:

AddLine(10;10;100;100;1) /* 1px wide black line (default). */

AddLine(10;10;100;100) /* Same as line above. */

LineStyle(all;;2.5;red) /* 2.5px wide red lines. */

BorderStyle(all;;0.5) /* 0.5px wide black borders. */

MajorGridLineWidths(x;y;0.25) /* 0.25px wide horizontal grid lines. */

MajorGridLineWidths(y;x;0) /* Hide vertical grid lines. */

Example

EXAMPLE_01

1	OpenDrawing(220;180)
2	AddLine(10; 10;210; 10;0) /* Invisible */
3	AddLine(10; 30;210; 30;0.25)
4	AddLine(10; 50;210; 50;0.5)
5	AddLine(10; 70;210; 70;1) /* Default width. */
6	AddLine(10; 90;210; 90;1.5)
7	AddLine(10;110;210;110;3)
8	AddLine(10;131;210;131;6)
9	AddLine(10;155;210;155;12)
10	CloseDrawing()

Dash Patterns

As an option, a dash pattern can be assigned to a stroke by adding a list of dash lengths and gaps. These elements are separated by any whitespace characters, including space, tab, and new line. For example:

AddLine(10;10;100;100;1 5 5) /* 1px wide dashed black line. */

LineStyle(all;;1 9 4 2 4) /* 1px wide dot-dashed lines. */

LineStyle(1;poly;0.5 6 2;red) /* 0.5px wide dashed red polygonal curve. */

BorderStyle(all;;2.5 9 4 2 4) /* 2.5px wide dot-dashed borders. */

MajorGridLineWidths(x;y;0.25 2 2) /* 0.25px wide dotted horizontal grid lines. */

Dotted Lines:

To create a dotted line with perfect round dots the line thickness and the dash and gap lengths must be identical. For example:

LineStyle(1;poly;2 2 2;red)

Example

EXAMPLE_02

1	OpenDrawing(220;190)
2	AddLine(10; 10;210; 10;0.25 2 2) /* strokeWidth:0.25px dashLength:2px gapLength:2px */
3	AddLine(10; 30;210; 30;0.5 15 8) /* strokeWidth:0.5px dashLength:15px gapLength:8px */
4	AddLine(10; 50;210; 50;1 12 3 1 3)
5	AddLine(10; 70;210; 70;1 12 3 1 3 1 3)
6	AddLine(10; 90;210; 90;1 42 7 1 7 7 7 1 7)
7	AddLine(10;110;210;110;2 20 6)
8	AddLine(10;131;210;131;8 0.5 5) /* strokeWidth:8px dashLength:0.5px gapLength:5px */
9	AddLine(10;155;210;155;12 12.1 12.1) /* Square dotted — dash and gap lengths are slightly different from stroke width. */
10	AddLine(16;178;204;178;12 12 12) /* Round dotted. */
11	CloseDrawing()

Line Shapes

A series of points can be connected in different ways, for example, by a polygonal line or a smooth curve. xmCHART supports the following line shapes:

Line Segments

By using constant jump (or value 1) a "line" is represented by a series of disconnected horizontal or vertical line segments. Line shape constant jump is only supported in combination with line charts and can be activated by the function LineStyle(). Optionally, since xmCHART 5.0.4, a so-called shift factor can be added to the jump constant number. The factor in the interval (0,1) shifts the line horizontally (or vertically). The default shift factor is 0.5.

Examples

EXAMPLE_03

1	OpenDrawing(240;120)
2	ChartData(2 6 8 5 3)
3	LineChart(symbol)
4	SymbolStyle(1;circle;5;2;#fafbfe;solid;steelBlue)
5	LineStyle(1;jump;0.5;steelBlue) /* Shift factor: 0.5 */
6	Scaling(y;linear;0;10)
7	AxisMajorTicks(all;8;;;;out)
8	GridLocation(all;0) /* Hide grid. */
9	CloseDrawing()

EXAMPLE_04

1	OpenDrawing(240;120)
2	ChartData(2 6 8 5 3)
3	LineChart(symbol)
4	SymbolStyle(1;circle;5;2;#fafbfe;solid;steelBlue)
5	LineStyle(1;1 0.0;0.5;steelBlue) /* Shift factor: 0.0 */
6	Scaling(y;linear;0;10)
7	AxisMajorTicks(all;8;;;;out)
8	GridLocation(all;0) /* Hide grid. */
9	CloseDrawing()

EXAMPLE_05

1	OpenDrawing(240;120)
2	ChartData(2 6 8 5 3)
3	LineChart(symbol)
4	SymbolStyle(1;circle;5;2;#fafbfe;solid;steelBlue)
5	LineStyle(1;1 1.0;0.5;steelBlue) /* Shift factor: 1.0 */
6	Scaling(y;linear;0;10)
7	AxisMajorTicks(all;8;;;;out)
8	GridLocation(all;0) /* Hide grid. */
9	CloseDrawing()

Stair-step Lines

By using line shape constant step (or value 2) stair-step lines and borders are drawn. Stair-step lines are available for the following functions:

BorderStyle() /* For area charts. */

LineStyle() /* For line charts. */

MovingAverageLineStyle()

Optionally, since xmCHART 5.0.4, a so-called shift factor can be added to the step constant number. The factor in the interval (0,1) shifts the stepped line horizontally (or vertically). The default shift factor is 0.5.

Examples

EXAMPLE_06

1	OpenDrawing(240;120)
2	ChartData(2 6 8 5 3)
3	LineChart(symbol)
4	SymbolStyle(1;circle;5;2;#fafbfe;solid;steelBlue)
5	LineStyle(1;step;0.5;steelBlue) /* Shift factor: 0.5 */
6	Scaling(y;linear;0;10)
7	AxisMajorTicks(all;8;;;;out)
8	GridLocation(all;0) /* Hide grid. */
9	CloseDrawing()

EXAMPLE_07

1	OpenDrawing(240;120)
2	ChartData(2 6 8 5 3)
3	LineChart(symbol)
4	SymbolStyle(1;circle;5;2;#fafbfe;solid;steelBlue)
5	LineStyle(1;2 0.0;0.5;steelBlue) /* Shift factor: 0.0 */
6	Scaling(y;linear;0;10)
7	AxisMajorTicks(all;8;;;;out)
8	GridLocation(all;0) /* Hide grid. */
9	CloseDrawing()

EXAMPLE_08

1	OpenDrawing(240;120)
2	ChartData(2 6 8 5 3)
3	LineChart(symbol)
4	SymbolStyle(1;circle;5;2;#fafbfe;solid;steelBlue)
5	LineStyle(1;2 1.0;0.5;steelBlue) /* Shift factor: 1.0 */
6	Scaling(y;linear;0;10)
7	AxisMajorTicks(all;8;;;;out)
8	GridLocation(all;0) /* Hide grid. */
9	CloseDrawing()

Polygonal Lines

The default line shape constant poly (or value 3) is available for the following functions:

BorderStyle()

LineStyle()

MovingAverageLineStyle()

Example

EXAMPLE_09

1	OpenDrawing(240;120)
2	ChartData(2 6 8 5 3)
3	LineChart(symbol)
4	SymbolStyle(1;circle;5;2;#fafbfe;solid;steelBlue)
5	LineStyle(1;poly;0.5;steelBlue)
6	Scaling(y;linear;0;10)
7	AxisMajorTicks(all;8;;;;out)
8	GridLocation(all;0) /* Hide grid. */
9	CloseDrawing()

Smooth Lines

xmCHART comes with two different line smoothing methods. The smoothing algorithm used for line shape constant smooth (or value 4) produces a more accurate result if the data consists of values of a smooth function. On the other hand, the algorithm used for line shape constant pchip (or value 5) has no overshoots and less oscillation if the data are not smooth ( pchip stands for "Piecewise Cubic Hermite Interpolating Polynomial" ). In math terminology, smooth returns a spline with curvature continuity, i.e. continuous derivatives of first and second order, pchip has tangent continuity, i.e. only the first-order derivative is continuous.

Optionally, a so-called tension factor can be added to the smooth and pchip constant number. The tension factor in the interval (0,2) can be interpreted as the "length" of the tangent. The default tension is 1, a tension of 0 yields to a polygonal shape. For example:

LineStyle(1;4 1) /* Same as LineStyle(1;smooth) */

LineStyle(1;4 0) /* Same as LineStyle(1;poly) */

LineStyle(1;4 0.8)

LineStyle(1;5 1) /* Same as LineStyle(1;pchip) */

LineStyle(1;5 0) /* Same as LineStyle(1;poly) */

LineStyle(1;5 1.2)

The line shape constants smooth and pchip are available for the following functions:

AddSmoothPolygon()

AddSmoothPolyline()

BorderStyle() /* For area charts, polar and radar charts. */

LineStyle() /* For line charts. */

MovingAverageLineStyle()

Examples

EXAMPLE_10

1	OpenDrawing(480;120)
2	/* Left graph. */
3	OpenChart(35;15;190;75;on)
4	ChartData(2 6 8 5 3)
5	LineChart(symbol)
6	SymbolStyle(1;circle;5;2;#fafbfe;solid;steelBlue)
7	LineStyle(1;smooth;0.5;steelBlue)
8	Scaling(y;linear;0;10)
9	AxisMajorTicks(all;8;;;;out)
10	GridLocation(all;0) /* Hide grid. */
11	AddText(130;52.5;"smooth";Verdana;10;plain;steelblue;center;center)
12	CloseChart()
13	/* Right graph. */
14	OpenChart(275;15;190;75;on)
15	ChartData(2 6 8 5 3)
16	LineChart(symbol)
17	SymbolStyle(1;circle;5;2;#fafbfe;solid;steelBlue)
18	LineStyle(1;pchip;0.5;steelBlue)
19	Scaling(y;linear;0;10)
20	AxisMajorTicks(all;8;;;;out)
21	GridLocation(all;0) /* Hide grid. */
22	AddText(370;52.5;"pchip";Verdana;10;plain;steelblue;center;center)
23	CloseChart()
24	CloseDrawing()

EXAMPLE_11

1	OpenDrawing(450;210)
2	/* Left graph. */
3	OpenView(10;5;210;200)
4	OpenChart(30;15;165;165;on)
5	ChartData(0.0 0.25 0.75 1.0 ; 1.0 1.0 2.0 2.0 ;
6	0.0 0.25 0.75 1.0 ; 1.0 1.0 2.0 2.0 )
7	LineChart2D(symbol+shadow)
8	ShadowStyle(1;1 1 1)
9	ShadowStyle(2;0)
10	LineStyle(1;5 1.5;0.5;magenta) /* pchip (5) with tension factor 1.5 */
11	LineStyle(2;smooth;0.5;steelBlue)
12	SymbolStyle(1;circle;4;1.4;#fafbfe;solid;magenta)
13	SymbolStyle(2;none)
14	Scaling(x;linear;0;1;4)
15	Scaling(y;linear;0.5;2.5;4)
16	AxisLine(all;0) /* Hide axis lines. */
17	AxisMajorTicks(all;0) /* Hide tick marks. */
18	AxisMajorTickLabelTexts(x;"\|u\|")
19	AxisMajorTickLabelOptions(x;out;0;3)
20	AxisMajorTickLabelOptions(y;out;-3;0)
21	MajorGridLineWidths(all;all;0.25)
22	LegendTexts("pchip";"smooth")
23	LegendStyle(Verdana;10)
24	LegendBackground(255 255 255 200;;0)
25	LegendOptions(bottomRight;on;0;4)
26	CloseChart()
27	CloseView()
28	/* Right graph. */
29	OpenView(230;5;210;200)
30	OpenChart(30;15;165;165;on)
31	ChartData( 1.2 2 5.6 4.6 3 2.8 0.6 ;
32	1.2 2 5.6 4.6 3 2.8 0.6 )
33	LineChart(symbol+shadow)
34	ShadowStyle(1;1 1 1)
35	ShadowStyle(2;0)
36	LineStyle(1;pchip;0.5;magenta)
37	LineStyle(2;smooth;0.5;steelBlue)
38	SymbolStyle(1;circle;4;1.4;#fafbfe;solid;magenta)
39	SymbolStyle(2;none)
40	Scaling(y;linear;0;6;6)
41	AxisLine(all;0) /* Hide axis lines. */
42	AxisMajorTicks(all;0) /* Hide tick marks. */
43	AxisMajorTickLabelOptions(x;out;0;3)
44	AxisMajorTickLabelOptions(y;out;-3;0)
45	MajorGridLineWidths(all;all;0.25)
46	LegendTexts("pchip";"smooth")
47	LegendStyle(Verdana;10)
48	LegendBackground(255 255 255 200;;0)
49	LegendOptions(bottomCenter;on;0;4)
50	CloseChart()
51	CloseView()
52	CloseDrawing()

Legal Newsletter Contact

Site Map