Bar Chart Properties dialog

The Bar Chart dialog appears when a Bar Chart object is right-clicked and the Chart... option is clicked. It determines how the Bar Chart is displayed in output and in Preview mode (see Business graphics).

All of the settings in this dialog are equivalent to a property in the amCharts library (see: amCharts' Class Reference). The description of each setting specifies the corresponding property. When you've made a setting, you can also find the property on the Source tab.

General tab

Most settings on the General tab correspond to properties of the AmSerialChart class in the amCharts library; see: AmSerialChart.

  • General Group:

    • Display grid above graph: Check to display the grid on top of the bars so that it is always visible. (Equivalent to the

      gridAboveGraphs

      property; see: gridAboveGraphs.)

    • Rotate: Check to rotate the chart 90 degrees so that the bars are horizontal starting from the left. (Equivalent to the

      rotate

      property; see: rotate.)

    • Stack Series: Check to stack the values in one bar, instead of having one bar per value. (Equivalent to the

      stackType

      property of the

      ValueAxis

      ; see: stackType.)

  • Text Group: Determines how text is displayed in labels and legends.

    • Font: Enter the font-face to use to display text. The font must be installed on the system and defaults to Verdana if the font is not found. (Equivalent to the

      fontFamily

      property; see: fontFamily.)

    • Size: Enter the size of the font. Defaults to 11. (Equivalent to the

      fontSize

      property; see: fontSize.)

    • Color: Select the color in which to display text: click the colored square to open the Color Picker dialog (Color Picker), or enter a valid hexademical color (HTML Hex Color) or a predefined CSS color (CSS color names). (Equivalent to the

      color

      property; see: color.)

  • 3D Group: Creates a 3D effect if both settings in this group are higher than 0.

    • Depth: The depth of the 3D part of the plot area. (Equivalent to the

      depth3D

      property; see: depth3D.)

    • Angle: The angle of the 3D part of the plot area. (Equivalent to the

      angle

      property; see: angle.)

Value Axis tab

Settings on the Value Axis tab are equivalent to properties of the ValueAxis class in the amCharts library; see: ValueAxis.

  • Title group:

    • Label: Enter a label for the value axis (the Y axis, or the X axis if the graph is rotated). (Equivalent to the

      title

      property; see: title.)

    • Bold: Check this option if the title should be bold. (Equivalent to the

      titleBold

      property; see: titleBold.)

    • Color: The default label color is black. To select a custom color for the label, click the colored square to open the Color Picker dialog (Color Picker), or enter a valid hexademical color (HTML Hex Color) or a predefined CSS color (CSS color names). (Equivalent to the

      titleColor

      property; see: titleColor.)

    • Font Size: Enter a font size for the label. (Equivalent to the

      titleFontSize

      property; see: titleFontSize.)

  • Grid group:

    • Color: Select a color for the grid lines that divide the value axis: click the colored square to open the Color Picker dialog (Color Picker), or enter a valid hexademical color (HTML Hex Color) or a predefined CSS color (CSS color names). (Equivalent to the

      gridColor

      property; see: gridColor.)

    • Opacity: Enter the opacity percentage of the grid. Default is 15%. 100 is fully opaque, 0 is transparent. (Equivalent to the

      gridAlpha

      property; see: gridAlpha.)

    • Thickness: Enter a thickness for the grid lines. Default is 1. (Equivalent to the

      gridThickness

      property; see: gridThickness.)

    • Tick Length: Length of the tick marks. (Equivalent to the

      tickLength

      property; see: tickLength.)

  • Axis group:

    • Color: Select a color for the value axis: click the colored square to open the Color Picker dialog (Color Picker), or enter a valid hexademical color (HTML Hex Color) or a predefined CSS color (CSS color names). (Equivalent to the

      axisColor

      property; see: axisColor.)

    • Opacity: Enter the opacity in percentage for the axis. 100 is fully opaque, 0 is transparent. Set opacity to 0 to hide the axis. (Equivalent to the

      axisAlpha

      property of the

      ValueAxis

      ; see: axisAlpha.)

    • Thickness: Enter the thickness of the axis. (Equivalent to the

      axisThickness

      property of the

      ValueAxis

      ; see: axisThickness.)

  • Labels: Check this option to make the labels on the value axis visible. This is often useful in rotated charts. (Equivalent to the

    labelsEnabled

    property of the

    ValueAxis

    ; see: labelsEnabled.)

    • Frequency: Defines per how many grid lines a label will be placed. (Equivalent to the

      labelFrequency

      property of the

      ValueAxis

      ; see: labelFrequency.)

Category Axis tab

Settings on the Category Axis tab correspond to properties of the CategoryAxis class in the amCharts library; see: CategoryAxis.

  • Title group:

    • Label: Enter a label for the category axis (the X axis, or the Y axis if the graph is rotated).(Equivalent to the

      title

      property; see: title.)

    • Bold: Check if you want the title to be bold. (Equivalent to the

      titleBold

      property; see: titleBold.)

    • Color: Select a custom color for the label (default is black): click the colored square to open the Color Picker dialog (Color Picker), or enter a valid hexademical color (HTML Hex Color) or a predefined CSS color (CSS color names). (Equivalent to the

      titleColor

      property; see: titleColor.)

    • Font Size: Enter a font size for the title. (Equivalent to the

      titleFontSize

      property; see: titleFontSize.)

  • Grid group:

    • Color: Select a color for the grid lines that divide the category axis: click the colored square to open the Color Picker dialog (Color Picker), or enter a valid hexademical color (HTML Hex Color) or a predefined CSS color (CSS color names). (Equivalent to the

      gridColor

      property; see: gridColor.)

    • Opacity: Enter the opacity percentage of the grid. Default is 15%. 100 is fully opaque, 0 is transparent. (Equivalent to the

      gridAlpha

      property; see: gridAlpha.)

    • Thickness: Enter a thickness for the grid lines. Default is 1. (Equivalent to the

      gridThickness

      property; see: gridThickness.)

    • Position: Specifies if a grid line is placed on the centre of a cell or on the beginning of a cell. (Equivalent to the

      gridPosition

      property; see: gridPosition.)

      The position of the ticks (which is Middle by default) does not move with the grid. To change the tick position, add the following to the

      categoryAxis

      section on the Source tab:

      "tickPosition": "start"

      .

    • Tick Length: Length of the tick marks. (Equivalent to the

      tickLength

      property; see: tickLength.)

      By default, one label per grid line will appear on the Category axis. To change that frequency, add the following to the

      categoryAxis

      section on the Source tab:

      "labelFrequency": "2"

      (replace 2 by the desired number of grid lines).

  • Axis group:

    • Color: Select a color for the value axis: click the colored square to open the Color Picker dialog (Color Picker), or enter a valid hexademical color (HTML Hex Color) or a predefined CSS color (CSS color names). (Equivalent to the

      axisColor

      property; see: axisColor.)

    • Opacity: Enter the opacity in percentage for the axis. 100 is fully opaque, 0 is transparent. Set opacity to 0 to hide the axis. (Equivalent to the

      axisAlpha

      property; see: axisAlpha.)

    • Thickness: Enter the thickness of the axis. (Equivalent to the

      axisThickness

      property; see: axisThickness.)

    • Auto Wrap: Specifies if axis labels (when horizontal) should be wrapped if they don't fit in the allocated space. (Equivalent to the

      autoWrap

      property; see: autoWrap.)

Graphs tab

Most settings on the Graphs tab correspond to properties of the AmGraph class in the amCharts library; see: AmGraph.

  • Labels:

    • Text: Text of the data labels. You can use tags like [[value]], [[description]], [[percents]], or[[category]]. (Equivalent to the

      labelText

      property; see: labelText.)

    • Position: Position of the data labels. Possible values are: "bottom", "top", "right", "left", "inside", "middle". (Equivalent to the

      labelPosition

      property; see: labelPosition.)

    • Rotation: Rotation of the data labels. Supported notations:

      0.0

      ,

      0.0°

      or

      0.0 deg

      . (Equivalent to the

      labelRotation

      property; see: labelRotation.)

    • Offset: Vertical offset of the data labels. A positive offset moves the data labels up. A negative value moves them down. (Equivalent to the

      labelOffset

      property; see: labelOffset.)

    • Anchor: Select whether the start, middle or end of a data label should be anchored to the bar. This setting moves the labels horizontally. (Equivalent to the

      labelAnchor

      property; see: labelAnchor.)

  • Columns:

    • Width: Specify a bar width between 0 and 1. (This is a relative width, not pixel width). (Equivalent to the

      columnWidth

      property; see: columnWidth.)

    • Spacing: The gap in pixels between two columns of the same category. (Equivalent to the

      columnSpacing

      property of the

      AmSerialChart

      class; see: columnSpacing.)

Legend tab

Settings on the Legend tab correspond to properties of the AmLegend class in the amCharts library; see: AmLegend.

  • Show Legend: Specifies if legend is enabled or not. (Equivalent to the

    enabled

    property; see: enabled.)

  • Legend Group: Defines how the legends are shown.

    • Equal label widths: Check so that all labels are of equal width in the Legends box. The Legend's width will accommodate the largest value. (Equivalent to the

      equalWidths

      property; see: equalWidths.)

    • Position: Use the drop-down to select where the legend is shown: at the Right, Left, Top or Bottom. (Equivalent to the

      position

      property; see: position.)

    • Align: Use the drop-down to select how to align the text in the labels: Left, Middle or Right. (Equivalent to the

      align

      property; see: align.)

    • Horizontal Space: Horizontal space between legend items, in pixels. (Equivalent to the

      spacing

      property; see: spacing.)

    • Vertical Space: Enter a numerical value (in pixels) to define the vertical space between legend items, and also between the legend border and the first and last legend item. (Equivalent to the

      verticalGap

      property; see: verticalGap.)

    • Max Columns: Enter a numerical value to define the maximum number of columns in the legend. If the Legend's position is set to "right" or "left", this is automatically set to 1. (Equivalent to the

      maxColumns

      property; see: maxColumns.)

  • Labels Group: Defines if and how labels are shown in the Legend.

    • Text: Enter the text used to display the labels;

      [[title]]

      is a variable that will be replaced with the title of the graph. (Equivalent to the

      labelText

      property; see: labelText.)

  • Markers Group: Defines how the Legend's Markers look. Markers are icons with a color matching the Legend with its corresponding line.

    • Type: Use the drop-down to select in which shape the Markers are displayed; "none" hides the Markers completely. (Equivalent to the

      markerType

      property; see: markerType.)

    • Size: Enter the size (in pixels) for the Markers to be displayed. (Equivalent to the

      markerSize

      property; see: markerSize.)

    • Label Gap: Enter the distance (in pixels) between the legend marker and legend text. (Equivalent to the

      markerLabelGap

      property; see: markerLabelGap.)

    • Border Width: Use the drop-down to define the thickness of the border added to the Markers. The default value (0) means the line will be a "hairline" (1 px). In case the Marker type is line, this style will be used for the line thickness. (Equivalent to the

      markerBorderThickness

      property; see: markerBorderThickness.)

    • Border Color: Color of the Legend's border. Enter a valid hexademical color (HTML Hex Color) or a predefined CSS color (CSS color names), or click the colored square to open the Color Picker dialog (Color Picker). (Equivalent to the

      markerBorderColor

      property; see: markerBorderColor.)

    • Border Opacity: Enter a numerical value between 0 and 100 to define the opacity (in percentage) of the border. (Equivalent to the

      markerBorderAlpha

      property; see: markerBorderAlpha. When specified on the Source tab, the value should be between 0 and 1, e.g. 0.8.)

Source tab

The JSON on the Source tab reflects the choices made in the other tabs and, more importantly, provides the possibility to add in any amCharts configuration option that is unavailable via the other tab menus. For more information see: Adding and editing properties manually.