Chart Label
You can specify labels for individual slices (in bar, pie, doughnut or polar chart) or bar using the chl parameter. You can also display a legend with the same or different values, one legend entry per slice. Use \n for multi-line labels.
Only URL-safe characters are permitted in label strings. To be safe, you should URL-encode any strings containing characters not in the character set 0-9a-zA-Z.
Syntax
chl=
<label_value>|
...
<label_value>
<label_value>A string value to apply to a slice or bar. Labels are applied consecutively to the data points inchd. If you have multiple series (for a concentric pie chart, for example), labels are applied to all points in all sequences, in the order specified inchd. Use a pipe delimiter (|) between each label. Specify a missing intervening value by using two consecutive pipe characters with no space between them:||. You do not need to label all slices.
Examples
Let specify labels for a simple animated pie chart.
cht=p3
chd=t:20,20,30,40,50
chl=20|20|30|40|50
Same as the previous chart but this time as an animated donught chart.
cht=pd
[...]
And now a concentric pie charts with labels for each slices.
chs=700x200
chd=t:1,2,3,4|10,40,100,100
chl=A|B|C|D|E|F|G|H
Here is an example of a line chart with label on some points, to do that we skip label using ||.
chl=Go!||||||oops||||||Yes!|||||||||not\nagain||||||||||||||oh boy
A bar chart with text inside each bar. Note that we only display the Y axis with chxt=y. Note that if chxl is not defined for the x axis but chl is, chl will be used instead.
chxt=y
chl=a|b|c|d|e|f
A bubble chart with text inside each bubble.
cht=bb&
chl=label 1|label 2
Positionning and formatting
Labels appearance (font color, font size) and position (anchoring, alignement, rotation) is fully and dynamically controllable.
Syntax
chlps=<option_name>,<option_value>|<option_name>,<option_value>|...
Formatting
Text Color
Define the text color of each label with the color option. The example below defines a pink label color:
chlps=color,FF00FF
Font size
Define the font size of each label with font.size. The example below defines a font size of 15px:
chlps=font.size,15
Text Opacity
Define the opacity (between 0 and 1) of each label with opacity. The example below defines an opacity of 50%:
chlps=opacity,0.5
Top padding
Define the padding of each label with padding.top:
chlps=padding.top,10
Right padding
Define the padding of each label with padding.right:
chlps=padding.right,10
Bottom padding
Define the padding of each label with padding.bottom:
chlps=padding.bottom,10
Left padding
Define the padding of each label with padding.left:
chlps=padding.left,10
Text Stroke Color
Define the textStrokeColor of each label with textStrokeColor:
chlps=textStrokeColor,f7f7f7
Text Stroke Width
Define the textStrokeWidth of each label with textStrokeWidth:
chlps=textStrokeWidth,10
Text Shadow Blur
Define the textShadowBlur of each label with textShadowBlur:
chlps=textShadowBlur,10
Text Shadow Color
Define the textShadowColor of each label with textShadowColor:
chlps=textShadowColor,cecece
Background Color
Define the background color of each label with backgroundColor
chlps=backgroundColor,00FF00
Border color
Define the border color of each label with borderColor. The example below defines a green border around the label:
chlps=borderColor,00FF00
Border radius
Define the border radius of each label with borderRadius. The example below defines a 5px border radius around the label:
chlps=borderRadius,5
Border width
Define the border width of each label with borderWidth. The example below defines a 10px border width around the label:
chlps=borderWidth,10
Text alignement
The textAlign option only applies to multiline labels and specifies the text alignment being used when drawing the label text.
Supported values for textAlign:
'start'(default): the text is left-aligned'center': the text is centered'end': the text is right-aligned'left': alias of'start''right': alias of'end'
chlps=textAlign,center
Positionning
Alignment
The align option defines the position of the label relative to the anchor point position and orientation. Its value can be expressed either by a number representing the clockwise angle (in degree) or by one of the following string presets:
'center'(default): the label is centered on the anchor point'start': the label is positioned before the anchor point, following the same direction'end': the label is positioned after the anchor point, following the same direction'right': the label is positioned to the right of the anchor point (0)'bottom': the label is positioned to the bottom of the anchor point (90)'left': the label is positioned to the left of the anchor point (180)'top': the label is positioned to the top of the anchor point (270)
chlps=align,top
Offset
The offset represents the distance (in pixels) to pull the label away from the anchor point. This option is not applicable when align is 'center'. Also note that if align is 'start', the label is moved in the opposite direction. The default value is 4.
chlps=offset,start
Anchoring
An anchor option is defined by an orientation vector and a position on the data element. The orientation depends on the scale type (vertical, horizontal or radial). The position is calculated based on the anchor option and the orientation vector.
Supported values for anchor:
'center'(default): element center'start': lowest element boundary'end': highest element boundary
chlps=anchor,start
Rotation
This option controls the clockwise rotation angle (in degrees) of the label, the rotation center point being the label center. The default value is 0 (no rotation).
chlps=rotation,4
Clamping
The clamp option, when true(or 1), enforces the anchor position to be calculated based on the visible geometry of the associated element (i.e. part inside the chart area).
chlps=clamp,true
If the element is fully hidden (i.e. entirely outside the chart area), anchor points will not be adjusted and thus will also be outside the viewport.
Clipping
When the clip option is true (or 1), the part of the label which is outside the chart area will be masked.
chlps=clip,1
Visibility
The display option controls the visibility of labels and accepts the following values:
true(default): the label is drawnfalse: the label is hidden
chlps=display,false