search
Back to amCharts.com
Table of Contents
Pie & Donut Settings Reference
This section contains a list of all settings available for Pie & Donut chart.
<settings>
These are general settings (not depending to any subsection) that apply to the entire chart.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| data_type | xml/csv | xml | The format of the data. This tells the software how to interpret the data it finds. |
| csv_separator | some symbol | ; | The character that will separate columns in a CSV file. |
| skip_rows | number | 0 | If you are using a CSV file, this setting allows you to skip the first several rows of the file (for example, if it contains metadata). |
| font | font name | Arial | The font of the text that will be displayed in the chart. Make sure to use common device font names |
| text_size | number | 11 | The size of the text that will be displayed in the chart. |
| text_color | hex color code | #000000 | The color of the text that will be displayed in the chart. More about hex color codes. |
| decimals_separator | some symbol | , | The character that will separate the whole digits from the decimal digits in a number. |
| thousands_separator | some symbol | Empty space | The character that will separate each three whole digits in a number (counting right-to-left from the decimal). |
| scientific_min | number | 0.000001 | If absolute value of your number is equal or less then scientific_min, this number will be formatted using scientific notation, for example: 0.0000023 → 2.3e-6 |
| scientific_max | number | 1000000000000000 | If absolute value of your number is equal or bigger then scientific_max, this number will be formatted using scientific notation, for example: 15000000000000000 → 1.5e16 |
| digits_after_decimal | number | 0 | If a value has less digits after the decimal separator than this number, zeroes will be added to the end. For example, if this is set to 2 and you have a value of 15.6, then the viewer will see it as 15.60. This is useful for charts showing prices, etc. |
| reload_data_interval | number, in seconds | 0 | How often the chart will reload the data. This is useful if your data is updated very often, and you want to show the change in data without reloading the page. |
| redraw | true/false | false | If your chart’s width and height is set in percent, and this is set to true, the chart will be resized proportionally when the browser window is resized. |
| add_time_stamp | true/false | false | If this is set to true, a timestamp will be added to the data file name every time data is loaded. This is useful if you are using dynamic data and the reload_data_interval setting. It is also useful if your data file changes frequently and you want the data to be reloaded every time the viewer reloads the page – otherwise the data might be cached in their browser. |
| precision | Number | 2 | How many decimal places will be shown for values which are calculated by the software (percent values). This does not affect the contents of the data file. |
| preloader_on_reload | true/false | false | If this is set to true, progress bar will be shown while data is being reloaded. |
| exclude_invisible | true/false | false | If this is set to true, slices with alpha=0 (invisible) will be ignored. Only visible slices will be used to calculate and display the chart. |
<pie>
This subsection lists settings that determine the look of the pie.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| x | number, in pixels, percent, or reversed | 50% | The horizontal position of the pie's center. The coordinate is counted from the left. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted from the right to left (such as !20). |
| y | number, in pixels, percent, or reversed | 45% | The vertical position of the pie's center. The coordinate is counted from the top. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted upwards from the bottom (such as !20). |
| radius | number, in pixels or percent | 25% | The radius of the pie (distance from the center to the edge). You can set the value in percent (such as 20%). |
| inner_radius | number, in pixels or percent | 0 (no hole) | If you want your pie to become a donut, this sets the size of the hole in the center. You can set the value in percent (such as 20%). |
| height | number, in pixels | 0 | If you want your pie to be in 3D, this sets its height above the surface. |
| angle | number (0-90) | 0 | If you want your pie to be in 3D, this sets its lean angle from the browser’s point of view. |
| start_angle | number (0-360) | 90 | Angle of a first slice. This will work properly only if <pie><height> is set to 0. If height is > 0, then there can be two angles only: 90 and 270 |
| outline_color | hex color code | #FFFFFF | The color of the pie’s outline. |
| outline_alpha | number (0-100) | 0 (no outline) | The opacity of the pie’s outline. |
| base_color | hex color code | none | The color of the first slice. This is only useful if you are also using the <brightness_step> setting. |
| brightness_step | number (0-100) | 20 | Lightness increase of each subsequent slice. This is only useful if you are also using the base_color setting. Use negative values for darker colors. |
| colors | hex color codes, comma-separated | #FF0F00, #FF6600, #FF9E01, #FCD202, #F8FF01, #B0DE09, #04D215, #0D8ECF, #0D52D1, #2A0CD0, #8A0CCF, #CD0D74 | Specific color codes for the slices. The first slice will use first color, the second - seconf, etc. You can add any number of colors here. If there eill be more slices when colors, random color will be used. |
| link_target | _blank, _top… | none – link opens in the same window | The target parameter of the slice URL, if any. Use "_blank" to open the URL in a new browser window. |
| alpha | number (0-100) | 100 | Opacity of all slices. (You can set opacity of individual slices in the data file.) |
| gradient | radial / linear | none | Gradient type. |
| gradient_ratio | numbers from -255 to 255, separated by commas | 0,-40 | The negative values will make the color darker and the positive - lighter. You can have any number of numbers here. |
| hover_brightness | number, from -255 to 255 | 0 | The slice may become darker/lighter when the user rolls-over it. The negative number will make it darker, the positive - lighter. |
<animation>
This subsection lists settings that control the animation effects of the chart.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| start_time | number, in seconds | 0 | The length of the fly-in animation when the chart is first loaded. 0 means the chart appears without an animation. |
| start_effect | bounce / regular /strong | bounce | The effect of the fly-in animation when the chart is loaded. Bounce – the slices will bounce when they hit the final position. Regular – the slices will move slowly. Strong – the slices will move quickly. |
| start_radius | number, in pixels or percent | 500% | The radius of the positions from which the slices will fly in. The default value is high enough that slices will fly in from off-screen. |
| start_alpha | number (0-100) | 0 | The initial opacity of all slices |
| pull_out_on_click | true/false | true | If this is set to true, a slice will be pulled out when the viewer clicks on it, or on the part of the legend corresponding to it. |
| pull_out_time | number, in seconds | 0 | The length of the pull-out animation. You can use decimal numbers here, such as 0.5 |
| pull_out_effect | bounce / regular / strong | bounce | The effect of the pull-out animation. |
| pull_out_radius | number, in pixels or percent | 20% | The distance that the slice will be pulled out.You can set the value in percent (such as 20%). |
| pull_out_only_one | true/false | false | If this is set to true, only one slice can be pulled out at a time. If the viewer clicks on a slice, any other pulled-out slice will be pulled in. |
| sequenced | true / false | false | if set to "true", the slices will appear one after another, not all at the same time. |
<data_labels>
This subsection lists the settings for the labels - the text accompanying the slices.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| radius | number, in pixels or percent | 30% | The distance between the label and the slice. You can use negative values to put the label on the slice. You can set the value in percent (such as 20%). |
| text_color | hex color code | Same as <text_color> in general settings | The color of the label text. |
| text_size | number | Same as <text_size> in general settings | The size of the label text. |
| max_width | number, in pixels | 120 | The maximum width of the label. If the label text is longer, it will be wrapped. |
| show | text | none | The label format. The tags in the curly brackets { } will be replaced with the slice information taken from the data file. The following tags are available: {value} {title} {percents}. Please note: if you want to use HTML tags, you must use the format <![CDATA[text]]> |
| show_lines | true/false | true | If this is set to true, the label will be connected to the slice with a straight line. |
| line_color | hex color code | #000000 | The color of the connecting line. |
| line_alpha | number (0-100) | 15 | The opacity of the connecting line. |
| hide_labels_percent | number (0-100) | 0 | If a slice's percentage of the pie is less than this number, its label will not be shown. This is useful to avoid cluttering up the chart if you have a lot of small slices. 0 means all labels will be shown. |
| avoid_overlapping | true / false | true | The chart automatically avoids data label overlapping by adjusting label position. Set this setting to "false" if you don't want this to happen. |
<group>
This subsection lists the settings that control slice grouping.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| percent | numbers (0-100) | 0 | 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 “others” slice. It will always be the last slice in a pie. |
| color | hex color code | the next color from <pie><colors> array | The color of the group slice. |
| title | text | Others | The title of the group slice. |
| url | URL | none – disabled | The URL that will open when the viewer clicks on the group slice. |
| description | text | none | The description of the group slice. |
| pull_out | true/false | false | If this is set to true, the slice will be pulled out when the chart loads. |
<background>
This subsection lists the settings that determine the chart's background.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| color | hex color code | #FFFFFF | The color of the chart background. You can use multiple color codes, separated with commas - this will produce a gradient. |
| alpha | number (0-100) | 0 | Background opacity. This applies to the background color.Set this to 0 if you are using a custom SWF (Flash object) or JPG image as a background. Set it to a higher number if you are using a background color. The default results in a white background. |
| border_color | hex color code | #000000 | The color of the chart's outer border. |
| border_alpha | number (0-100) | 0 | The opacity of the chart's outer border. |
| file | filename | none – disabled | The name of the SWF or JPG file that will be used as the background image. The file must be placed in the path folder (as set in the HTML; ampie in the original example). |
<balloon>
This subsection lists the settings that control the balloons. Balloons will appear when the viewer places the mouse over a slice.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| enabled | true/false | true | If this is set to true, a text balloon will appear when the viewer places the mouse cursor over a slice. |
| color | hex color code | Slightly darker than the slice color | The color of the balloon background. |
| alpha | number (0-100) | 80 | The opacity of the balloon background. |
| text_color | hex color code | #FFFFFF | The color of the balloon text. |
| text_size | number | Same as <text_size> in general settings | The size of the balloon text. |
| show | text | none | The label format. The tags in the curly brackets { } will be replaced with the slice information taken from the data file. The following tags are available: {value} {title} {percents} {description}. Please note: if you want to use HTML tags, you must use the format <![CDATA[text]] |
| max_width | number | 220 | The maximum width of a balloon. If there is too much text to fit in this width, the text will be wrapped. |
| corner_radius | number | 0 | Corner radius of a balloon. If bigger then 0, the balloon pointer will not be shown. |
| border_width | number | 0 | Balloon border width. |
| border_alpha | number | Same as <balloon><alpha> | Balloon border opacity. |
| border_color | hex color code | Same as <balloon><color> | Balloon border color. |
<legend>
This subsection lists the settings that control the chart's legend.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| enabled | true/false | true | If this is set to true, the legend is shown on the chart. |
| x | number, in pixels, percent, or reversed | 5% | The horizontal position of the legend's left edge. The coordinate is counted from the left. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted from the right to left (such as !20). |
| y | number, in pixels, percent, or reversed | right below the pie | The vertical position of the legend's top edge. The coordinate is counted from the top. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted upwards from the bottom (such as !20). If you want the legend to auto-fit the flash object, do not set this setting. |
| width | number, in pixels or percent | 90% | The width of the legend. You can set the value in percent (such as 20%). |
| color | hex color code | #FFFFFF | The color of the legend's background. You can use multiple color codes, separated with commas - this will produce a gradient. |
| max_columns | number | none | The maximum number of columns in the legend. (All slices will be represented, but in several rows if necessary.) |
| alpha | number (0-100) | 0 | The opacity of the legend's background. |
| border_color | hex color code | #000000 | The color of the legend's borders. |
| border_alpha | number (0-100) | 0 | The opacity of the legend's borders. |
| text_color | hex color code | Same as <text_color> in general settings | The color of the legend's text. |
| text_size | number | Same as <text_size> in general settings | The size of the legend's text |
| spacing | number, in pixels | 10 | The space between the rows and columns of the legend. |
| margins | number, in pixels | 0 | The space between the borders and the contents of the legend. This is useful if the borders are visible, or the legend's background color is different from the chart's background color. |
| reverse_order | true/false | false | If this is set to true, the legend entries will be in a reversed order. |
| align | left / center / right | left | The alignment of the legend entries. |
<key>
These are the settings for the legend's key.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| size | number, in pixels | 16 | The size of the key. The key is displayed in the legend next to the slice title, and is filled with the slice color. |
| border_color | hex color code | none – no border | The color of the key border. |
<values>
These are the settings for displaying slice values in the legend.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| enabled | true/false | false | If this is set to true, the slice value will be shown in the legend. |
| width | number, in pixels | none – fit to contents | The width of the value text in the legend. This is useful if you want all values to be right-aligned. |
| text | text | {percents}% | The tags in the curly brackets will be replaced with the slice information taken from the data file. Available tags are: {value} {percents}. Please note: if you want to use HTML tags, you must use the format <![CDATA[text]]> |
<export_as_image>
This subsection lists the settings that control the function of saving the chart as an image file.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| file | filename | None – disabled | If you provide a filename, the viewer will be able to save the chart as an image. The option will be available in the right-click menu. |
| target | _blank, _top… | none – file opens in the same window | The target parameter for opening the image file in the browser. Use "_blank" to open the URL in a new browser window. |
| x | number, in pixels, percent, or reversed | left-aligned | The horizontal position of the "Collecting data" text. This text will appear while the chart is being exported. The coordinate is counted from the left. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted from the right to left (such as !20). |
| y | number, in pixels, percent, or reversed | bottom-aligned | The vertical position of the "Collecting data" text. This text will appear while the chart is being exported. The coordinate is counted from the top. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted upwards from the bottom (such as !20). |
| color | hex color code | #BBBB00 | The color of the "Collecting data" text background. |
| alpha | number (0-100) | 0 | The opacity of the "Collecting data" text background. |
| text_color | hex color code | same as <text_color> in general settings | The color of the "Collecting data" text. |
| text_size | number | same as <text_size> in general settings | The size of the "Collecting data" text. |
<error_messages>
This subsection lists the settings that control error messages in the chart.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| enabled | true/false | true | If this is set to true, the error messages will be displayed |
| x | number, in pixels, percent, or reversed | centered | The horizontal position of the error message. The coordinate is counted from the left. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted from the right to left (such as !20). |
| y | number, in pixels, percent, or reversed | centered | The vertical position of the error message. The coordinate is counted from the top. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted upwards from the bottom (such as !20). |
| color | hex color code | #BBBB00 | The color of the error message background. You can use multiple color codes, separated with commas - this will produce a gradient. |
| alpha | number (0-100) | 100 | The opacity of the error message background. |
| text_color | hex color code | #FFFFFF | The color of the error message text. |
| text_size | number | Same as <text_size> in general settings | The size of the error message text. |
<strings>
This subsection contains settings that determine the texts of various messages displayed by the chart.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| no_data | text | No data for selected period | The text that will be displayed if the data for the selected period is missing from the data file. |
| export_as_image | text | Export as image | The text of the image export option in the right-click menu. |
| collecting_data | text | Collecting data | The text that will be displayed while the chart is being exported to an image file. |
<context_menu>
This subsection contains settings for the context menu that will appear when the viewer right-clicks on your chart. See adding custom commands to right click menu for more information.
<default_items>
| Setting | Available values | Default value | Description |
|---|---|---|---|
| zoom | true/false | false | If this is set to true, the Flash player's zoom controls are included in the right-click menu. |
| true/false | true | If this is set to true, the Flash player's print controls are included in the right-click menu. |
<labels>
This subsection lists the settings of labels - free bits of text not attached to anything. You can add multiple labels, each nested inside a <label></label> tag. Use labels for naming axes, chart title, etc.
| Setting | Available values | Default value | Description |
|---|---|---|---|
| x | number, in pixels, percent, or reversed | 0 | The horizontal position of the label. The coordinate is counted from the left. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted from the right to left (such as !20). |
| y | number, in pixels, percent, or reversed | 0 | The vertical position of the label. The coordinate is counted from the top. You can set the value in percent (such as 20%). You can also reverse the number, so it is counted upwards from the bottom (such as !20). |
| rotate | true/false | false | If this is set to true, the label is rotated by 90 degrees. |
| width | number, in pixels or percent | Fit to contents | The maximum width of the label. (If the contents exceed the width, the label will have multiple lines.) You can set the value in percent (such as 20%). |
| align | left/center/right | left | The alignment of the text in the label. |
| text_color | hex color code | As per general settings | The color of the text in the label. |
| text_size | number | Same as <text_size> in general settings | The size of the text in the label. |
| text | text | none | The text of the label. Please note: if you want to use HTML tags, you must use the format <![CDATA[text]]>. |
| © Antanas Marcelionis Contact and feedback: info@amcharts.com | Subscribe to amCharts news |