Lines and Borders
Overview
Knowledge about line and border configuration parameters is very important, because AnyChart allows to configure almost any line you can see on the chart: Lines in charts, Grids, Chart, Tooltips and Labels borders, and even Tickmark Lines.
Though the name of the node is not always <line> or <border>, it has all the attributes for line configuration and its own, like, for example: <major_tickmark>. When you will look at such nodes in XML Reference - you would not miss them, because they have all the attributes and they describe some "line-like" part of the chart.
In this tutorial all line attributes and features are described.
01 |
<border type="Solid" color="Red" thickness="2" opacity="0.8" caps="None" joints="Round" /> |
Basics
Each line can be colored with a solid or gradient fill, you can set line thickness and opacity and configure how line endings and bends are drawn.
Typical line settings look like:
The sample line chart below shows you a different line settings:
Coloring
There are two types of line coloring "Solid" and "Gradient"
Solid Line Color
To color a line with a solid color you should set its coloring type to "Solid" and set the color by any Coloring method:
01 |
<border color="Red" type="Solid" /> |
Gradient Line Fill
To color a line with a gradient transition you should set its coloring type to "Gradient" and set the gradient keys colors (by any Coloring method), opacity and position in <gradient> subnode:
01 |
<border type="Gradient"> |
02 |
<gradient> |
03 |
<key color="Red" position="0" /> |
04 |
<key color="Green" position="0.5" opacity="0.5" /> |
05 |
<key color="Blue" position="1" /> |
06 |
</gradient> |
07 |
</border> |
Line Thickness
To change the thickness of a line use thickness attribute. The value is set in pixels.
01 |
<line thickness="3" /> |
Dashed Lines
You can make line or grid line dashed and tune dash properties:
01 |
<line dashed="True" dash_length="2" space_length="2" /> |
Line Opacity
To change the opacity of a line use opacity attribute. The value is set as a ratio: 1 stands for opaque, and 0 - for transparent line:
01 |
<line opacity="0.5" /> |
Caps and Joints
Caps and joints are special parameters that define how line endings and bends are drawn.
The caps attribute specifies the caps style to use in drawing lines. You can specify the following three types of caps: "none", "round" and "square", as the following example shows:
The joint attribute specifies the joint style to use in drawing lines. It supports three types of joints: "miter", "round", and "bevel", as the following example shows:
