Element: Pie Chart

This element can be used to create pie charts. You can set the values for the chart in the contentDock® Management System manually or you connect them to DataContainer tables. The pie chart element uses the sub-element chart legend, that uses own styles for the presentation.
Sample App
You can test this element with sample styles directly in the public area of the contentDock® Viewer App. You can also load these sample styles from the Template Library into your user account and import them into your app project.
Styles
-
BackgroundColorDefines the color of the element background. Possible values are hexadecimal and of RGBA color values.
The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.
The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.Preset system value
This value is used if no style is defined for this element.
rgba(255,255,255,0)
ImageDefines the background image for the element. The image is scaled in the element. -
BorderPositionSpecify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.
Possible values are:
Inside: The border is drawn inside.
Outside: The border is drawn outside.Preset system value
This value is used if no style is defined for this element.
inner
ColorDefines the color of the element border. Possible values are hexadecimal and of RGBA color values.
The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.
The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.Preset system value
This value is used if no style is defined for this element.
rgba(255,255,255,0)
HeightDefines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.
Please note that only integers are entered. A "px" need not be captured.Preset system value
This value is used if no style is defined for this element.
0
RadiusDefines the radius of the border in pixels used in the element corners. The value is set individually in an input field.
Please note that only integers are entered. A "px" need not be captured.Preset system value
This value is used if no style is defined for this element.
0
Show the radius top leftPreset system value
This value is used if no style is defined for this element.
1
Show the radius top rightPreset system value
This value is used if no style is defined for this element.
1
Show the radius bottom leftPreset system value
This value is used if no style is defined for this element.
1
Show the border radius bottom rightPreset system value
This value is used if no style is defined for this element.
1
-
ShadowShadow color
Preset system value
This value is used if no style is defined for this element.
#000000
Shadow opacityPreset system value
This value is used if no style is defined for this element.
0
Radius of the shadowPreset system value
This value is used if no style is defined for this element.
0
Offset height of the shadowPreset system value
This value is used if no style is defined for this element.
0
Offset width of the shadowPreset system value
This value is used if no style is defined for this element.
0
-
Chart graphicBorder heightDefines the thickness of the border in pixels surrounding the pie chart.
Preset system value
This value is used if no style is defined for this element.
10
Border colorDefines the color of the pie chart border. Possible values are hexadecimal and of RGBA color values.
The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.
The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.Preset system value
This value is used if no style is defined for this element.
#ffffff
Radius for circle in the centerDefines the radius of the circle in the center of the pie chart.Preset system value
This value is used if no style is defined for this element.
50
Color for circle in the centerDefines the color of the circle in the center of the pie chart. Possible values are hexadecimal and of RGBA color values.
The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.
The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.Preset system value
This value is used if no style is defined for this element.
rgba(255,255,255,0)
Width of the space between the circle segmentsDefines the width of the spacer between the circle segments.Preset system value
This value is used if no style is defined for this element.
5
Color of the space between the circle segmentsDefines the color of the spacer between the circle segments. Possible values are hexadecimal and of RGBA color values.
The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.
The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.Preset system value
This value is used if no style is defined for this element.
rgba(255,255,255,0)
-
Title on pie chart segmentShow title on pie chart segment
Preset system value
This value is used if no style is defined for this element.
0
Distance between title and the pie segmentFontFont sizeColor
Info layer chart value point (sub element)
-
BackgroundColorDefines the color of the layer background. Possible values are hexadecimal and of RGBA color values.
The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.
The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.Preset system value
This value is used if no style is defined for this element.
rgba(0,0,0,0.4)
ImageDefines the background image for the layer. The image is scaled in the layer. -
BorderPositionSpecify the position of the border. The border always encloses the layer, but you can choose in which direction the border will be drawn.
Possible values are:
Inside: The border is drawn inside.
Outside: The border is drawn outside.Preset system value
This value is used if no style is defined for this element.
outer
ColorDefines the color of the layer border. Possible values are hexadecimal and of RGBA color values.
The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.
The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.Preset system value
This value is used if no style is defined for this element.
rgba(0,0,0,0.8)
HeightDefines the thickness of the border in pixels surrounding the layer. The value is set individually in an input field.
Please note that only integers are entered. A "px" need not be captured.Preset system value
This value is used if no style is defined for this element.
4
RadiusDefines the radius of the border in pixels used in the layer corners. The value is set individually in an input field.
Please note that only integers are entered. A "px" need not be captured.Preset system value
This value is used if no style is defined for this element.
5
Show the radius top leftPreset system value
This value is used if no style is defined for this element.
1
Show the radius top rightPreset system value
This value is used if no style is defined for this element.
1
Show the radius bottom leftPreset system value
This value is used if no style is defined for this element.
1
Show the border radius bottom rightPreset system value
This value is used if no style is defined for this element.
1
-
ShadowShadow color
Preset system value
This value is used if no style is defined for this element.
#000000
Shadow opacityPreset system value
This value is used if no style is defined for this element.
0
Radius of the shadowPreset system value
This value is used if no style is defined for this element.
0
Offset height of the shadowPreset system value
This value is used if no style is defined for this element.
0
Offset width of the shadowPreset system value
This value is used if no style is defined for this element.
0
-
Inner SpaceAt the topDefines the distance between the top of the "Layer" and the text.
Preset system value
This value is used if no style is defined for this element.
10
At the bottomDefines the distance between the bottom of the "Layer" and the text.Preset system value
This value is used if no style is defined for this element.
10
To the leftDefines the distance between the left of the "Layer" and the text.Preset system value
This value is used if no style is defined for this element.
10
To the rightDefines the distance between the right of the "Layer" and the text.Preset system value
This value is used if no style is defined for this element.
10
-
Title FontName of the fontDefines the font for the title text in the layer.
In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).Preset system value
This value is used if no style is defined for this element.
Open Sans Light
Font sizeDefines the size of the title text in the layer. The value is selected from the dropdown or can be set individually.Preset system value
This value is used if no style is defined for this element.
14
Use chart value color for titlesIf this style is activated, the defined color from the chart item will be used for the title text.Preset system value
This value is used if no style is defined for this element.
0
ColorIs used only when the style "Use chart value color for titles" is not activated.
Defines the color of the title text in the layer. Possible values are hexadecimal and of RGBA color values.
The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.
The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.Preset system value
This value is used if no style is defined for this element.
#ffffff
-
AlignmentAlignmentDefines the general alignment of the text within the layer.
Possible values are:
left: The text is left aligned.
right:The text is right aligned.
center:The text is centered in the layer.Preset system value
This value is used if no style is defined for this element.
center
-
Chart value fontFont nameDefines the font of the value text in the layer.
In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).Preset system value
This value is used if no style is defined for this element.
Open Sans Light
Font sizeDefines the size of the value text in the layer. The value is selected from the dropdown or can be set individually.Preset system value
This value is used if no style is defined for this element.
70
Use chart value color for titlesIf this style is activated, the defined color from the chart item will be used for the value text.Preset system value
This value is used if no style is defined for this element.
0
ColorIs used only when the style "Use chart value color for titles" is not activated.
Defines the color of the value text in the layer. Possible values are hexadecimal and of RGBA color values.
The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.
The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5. -
Layer behaviorDistance between title and value
Preset system value
This value is used if no style is defined for this element.
10