Pie Chart Properties dialog

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

General tab

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

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

    • Font: Type in 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: Type in the size of the font. Defaults to 11.
      (Equivalent to the fontSize property; see: fontSize.)

    • Color: Type the color in which to display text: 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 color property; see: color.)

  • Slice Colors Group

    Note: Settings made in this group override the settings made in the Chart Wizard (see Selecting data for a Business Graphic).

    • Base Color: Enter a base color: a valid HTML hexadecimal color value (HTML Hex Color) or a predefined CSS color (CSS color names), or click the colored square to open the Color Picker dialog (Color Picker). When a Base Color is set, it will be the color of the first slice and the colors of all other slices are based on this color.
      (Equivalent to the baseColor property; see: baseColor.)
      To set a color for each data field individually, leave this option empty and edit the script that fills the Pie Chart (see Selecting data for a Business Graphic).

    • Brightness Step: Enter the amount of brightness to change on each new slice. Positive values increase the brightness (max: 100), negative values decrease the brightness (minimum: -100). Default is 10.
      (Equivalent to the brightnessStep property; see: brightnessStep.)

  • Slice Outline Group: Determines whether an outline should be added to each slice of the chart.

    • Width: Select the width of the outline for each pie slice.
      (Equivalent to the outlineThickness property; see: outlineThickness.)

    • Color: Enter a color for the outline: a valid HTML hexadecimal color value (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 outlineColor property; see: outlineColor.)

    • Opacity: Enter the opacity of the outline. 100 is fully opaque, 0 is transparent.
      (Equivalent to the outlineAlpha property; see: outlineAlpha.)

Pie tab

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

  • Pie Group: Defines how the pie chart is displayed in the template.

    • Radius: Enter the radius of the Pie Chart as a percentage of the shortest length of the containing <div> object (e.g. 30%) or in pixels.
      (Equivalent to the radius property; see: radius.)

    • Hole Radius: Enter the radius of the center of the Pie Chart to remove, in pixels or as a percentage. The hole radius removes the center of the chart, creating a doughnut hole pie chart.
      (Equivalent to the innerRadius property; see: innerRadius.)

    • Start Angle: Enter the starting angle of the first slice of the chart, between 0 and 360 (decimals are allowed). This essentially rotates the Pie Chart. Note that if a 3D effect is added to the chart, the only accepted values are 90 or 270 degrees.
      (Equivalent to the startAngle property; see: startAngle.)

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

    • Depth: The depth of the Pie.
      (Equivalent to the depth3D property; see: depth3D.)

    • Angle: The Pie lean angle. This must be a value between 0 - 90.
      (Equivalent to the angle property; see: angle.)

Labels tab

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

  • Labels Group: Defines how the label text is shown.

    • Text: Enter the text to use to display labels. The default text is [[title]]: [[percents]]%. Variables can be used to display specific data, <br> can be used to create a new line:

      • [[title]] : Refers to the field label.

      • [[percents]] : Contains the percentage of the Pie chart the value represents.

      • [[value]] : Contains the numerical value of the field.

      • Any text: Adding text (such as a dollar sign or column, etc) will make it appear in each label.

      (Equivalent to the labelText property; see: labelText.)

    • Radius: The distance between the label and the slice, in pixels. You can use negative values to put the label on the slice.
      (Equivalent to the labelRadius property; see: labelRadius.)

  • Tick Group: Defines how ticks (line between the Pie chart and its labels) is shown.

    • Color: Enter a valid HTML hexadecimal color value (HTML Hex Color) or a predefined CSS color (CSS color names) for the color of the tick.
      (Equivalent to the labelTickColor property; see: labelTickColor.)

    • Opacity: Enter a percentage of opacity for the tick to be displayed. The default is 20 (20% opacity). 100 is fully opaque, 0 is transparent.
      (Equivalent to the labelTickAlpha property; see: labelTickAlpha.)

  • Grouping Group: Defines how smaller percentages are grouped together into an individual "Other" category.

    • Less than %: If there is more than one slice whose percentage of the pie is less than this number, those slices will be grouped together into one slice. This is the "other" slice. It will always be the last slice in a pie.
      (Equivalent to the groupPercent property; see: groupPercent.)

    • Slice Title: Enter a name for the label of the "Other" category.
      (Equivalent to the groupedTitle property; see: groupedTitle.)

    • Color: Enter a color for the slice: a valid HTML hexadecimal color value (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 groupedColor property; see: groupedColor.)

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.