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 hexademical color code (see Hex Calculator) or a predefined CSS color (see MDN Web Docs - named color).
      (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 hexademical color code (see Hex Calculator) or a predefined CSS color (see MDN Web Docs - named color).
      (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 hexademical color code (see Hex Calculator) or a predefined CSS color (see MDN Web Docs - named color).
      (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 hexademical color code (see Hex Calculator) or a predefined CSS color (see MDN Web Docs - named color).
      (Equivalent to the titleColor property; see: titleColor.)

    • Font Size: Enter a font size for the title.
      (Equivalent to the titleFontSizeproperty; 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 hexademical color code (see Hex Calculator) or a predefined CSS color (see MDN Web Docs - named color).
      (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 gridThicknessproperty; 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.)

      Tip:
      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.)

      Tip:
      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 hexademical color code (see Hex Calculator) or a predefined CSS color (see MDN Web Docs - named color).
      (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 spacingproperty; 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 labelTextproperty; 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 hexademical color code (see Hex Calculator) or a predefined CSS color (see MDN Web Docs - named color), 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.