Element: Bar Chart

This element can be used to create bar charts. You can set the values for the chart in the contentDock® Management System manually or you connect them to DataContainer tables. The Bar Chart element consists of the sub-elements x-axis, y-axis and the chart legend. All these sub-elements use their 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

  • Background
    Color
    Contentdock color help
    Defines 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)

    Image
    Contentdock background image help
    Defines the background image for the element. The image is scaled in the element.
  • Border
    Height
    Contentdock bar chart border height help
    Defines 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

    Radius
    Contentdock bar chart border radius help
    Defines 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

    Color
    Contentdock color help
    Defines 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)

    Position
    Contentdock bar chart border position help
    Specify 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

  • Chart
    View
    Contentdock bar chart visual options help
    Defines the general representation of the bar chart.

    Possible values are:

    Vertical: The bars are displayed vertically.

    Horizontal: The bars are displayed horizontally.

    Preset system value

    This value is used if no style is defined for this element.

    vertical

  • chart bars
    Border height of the bars
    Contentdock bar chart border bar height help
    Defines the thickness of the border in pixels surrounding the bars.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Border color of the bars
    Contentdock color help
    Defines the color of the bar 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)

    Border corner radius of the bars
    Distance between the bars
    Offset for the bars
    Animation speed of the bars in milliseconds
    Delay time before the animation starts in milliseconds
  • Title inside bar
    Show title in the bar
    Contentdock bar chart title in bar help
    If this style is activated, the X / Y axis labels are displayed in the bar.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Horizontal Alignment title in the bar
    Contentdock bar chart title horizontal alignment help
    Only if the diagram representation is "horizontal".

    Alignment of the y-axis label in the bar.

    Possible values are :

    left: The text is left-aligned.

    right: The text is right-aligned.

    center: The text is aligned horizontally centered.
    Vertical alignment of the title in the bar
    Contentdock bar chart title vertical alignment help
    Only if the diagram representation is "vertical".

    Alignment of the x-axis label in the bar.

    Possible values are :

    top: The text is aligned from top to bottom.

    bottom: The text is aligned from bottom to top.

    middle: The text is aligned vertically centered.

    Preset system value

    This value is used if no style is defined for this element.

    bottom

    Distance from the left to the title inside the bar
    Contentdock bar chart title distance left help
    Defines the distance from the left to the text in the bars.

    Preset system value

    This value is used if no style is defined for this element.

    5

    Distance from the right to the title inside the bar
    Contentdock bar chart title distance right help
    Only if the diagram representation is "horizontal".

    Defines the distance from the right to the text in the bars.
    Distance from the top to the title inside the bar
    Contentdock bar chart title distance top help
    Defines the distance from the top to the text in the bars.
    Distance from the bottom to the title inside the bar
    Contentdock bar chart title distance bottom help
    Only if the diagram representation is "vertical".

    Defines the distance from the bottom to the text in the bars.

    Preset system value

    This value is used if no style is defined for this element.

    5

    Font
    Contentdock font family help
    Defines the font of the text in the bars.

    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 size
    Contentdock font size help
    Defines the size of the text in the bars. 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.

    10

    Color
    Contentdock color help
    Defines the color of the text in the bars. 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

  • Value after the bar
    Show value after the bar
    Contentdock bar chart value after the bar help
    If this style is activated, the value is displayed to the right of the bars.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Distance between bar and value
    Contentdock bar chart distance bar value help
    Defines the distance between the bar and the value text.

    Preset system value

    This value is used if no style is defined for this element.

    5

    Font
    Contentdock font family help
    Defines the font of the value text right form the bars.

    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 size
    Contentdock font size help
    Defines the size of the value text right from the bars. 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 titles
    Contentdock bar chart value color after bar help
    If this style is activated, the defined color for the value will be used.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Is used only when the style "Use chart value color for titles" is not activated.

    Defines the color of the value text right from the bars. 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.

    #000000

Info layer chart value point (sub element)

  • Background
    Color
    Contentdock color help
    Defines 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)

    Image
    Contentdock background image help
    Defines the background image for the layer. The image is scaled in the layer.
  • Border
    Height
    Contentdock chart info layer border height help
    Defines 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

    Radius
    Contentdock chart info layer border radius help
    Defines 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

    Color
    Contentdock color help
    Defines 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)

    Position
    Contentdock chart info layer border position help
    Specify 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

  • Inner Space
    At the top
    Contentdock chart info layer padding top help
    Defines 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 bottom
    Contentdock chart info layer padding bottom help
    Defines 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 left
    Contentdock chart info layer padding left help
    Defines 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 right
    Contentdock chart info layer padding right help
    Defines 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 Font
    Name of the font
    Contentdock font family help
    Defines 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 size
    Contentdock font size help
    Defines 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 titles
    Contentdock chart info layer use chart color title help
    If 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

    Color
    Contentdock color help
    Is 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

  • Alignment
    Alignment
    Contentdock text align help
    Defines 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 font
    Font name
    Contentdock font family help
    Defines 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 size
    Contentdock font size help
    Defines 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 titles
    Contentdock chart info layer use chart color value help
    If 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

    Color
    Contentdock color help
    Is 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.

    Preset system value

    This value is used if no style is defined for this element.

    #ffffff

  • Layer behavior
    Distance between title and value

    Preset system value

    This value is used if no style is defined for this element.

    10