Pie Chart Options

These settings will affect the display of the individual Pie chart. Additional new Pie charts can be made or an existing Pie chart can be duplicated and edited independently of the original Pie chart.

General Chart Settings

Chart Name (non-Public): Reference name for the edit screen, not publicly seen.Width: Width of chart on page in pixels or percentages.Width Unit: Width unit can be in either pixels or percentages.Height: Height of chart on page in pixels or percentages.Height Unit: Height unit can be in either pixels or percentages.Chart Alignment: Alignment of chart on page: (left, center, right).Dataset Separator: Value separator for labels and datapoints.Dataset Compound Separator: Compound values separator for datapoints.Piecelabel Mode: Define the Piecelabel Mode for datalabels. Possible vales are: None, Label, Percetage or ValueFont Family: Set the font-family of the Piecelabel.Font Style: Set the font-style of the Piecelabel, possible values: normal, bold (or 500, 700, 900, etc), oblique, italic.Font Color: Set the font color of the Piecelabel.Font Size: Set the font-size of the Piecelabel (in pixels).Arc?: Draw text in arch.Data Value Label Prefix: Prefix for data values. Such as currency, scientific or other symbolsData Value Label Postfix: Postfix for data values. Such as copyright, trademark, mathematical, ¢, etcShow Thousands Separator?: Show thousands separator for data values.


Title Settings

Full Width?: Denotes that the title element should take the full width of the canvas (pushing down other elements).Display Title?: Toggle the display the publicly viewable title for the chart.Title: Set the publicly viewable title for the chart.Font Family: Set the font-family of the title.Font Style: Set the font-style of the title, possible values: normal, bold (or 500, 700, 900, etc), oblique, italic.Font Color: Set the font color of the title.Font Size: Set the font-size of the title, (in pixels).Position: Set the position of the title for the chart (left, right, top, bottom).Padding: Number of pixels to add above and below the title text.


Legend Settings

Display Legend?: Toggle the display of the chart legend on the front end.Full Width?: This box should take the full width of the canvas (pushing down other boxes).Reverse?: Legend will show datasets in reverse order.Use Point Style?: Label style will match corresponding point style (size is based on Font Size, Box Width is not used in this case).Font Family: Set the Legend font-family.Font Style: Set the Legend font-style.Font Color: Set the Legend font color.Font Size: Set the Legend font-size (in pixels).Position: Position of the chart legend on the front end.Box Width: Width of colored box.Padding: Set the Legend font padding between rows of the colored boxes.


Tooltips General Settings

Display Tooltips?: Toggle Tooltips enabled (checked) or disabled (unchecked).Intersect?: if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.Display Colors?: if checked, color boxes are shown in the tooltip.Interaction Mode: 1) Dataset - Finds items in the same dataset. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect false the nearest item is used to determine the index.
2) Index - Finds item at the same index. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect false the nearest item is used to determine the index.
3) Nearest - Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If intersect is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
4) Point - Finds all of the items that intersect the point.
5) x-Axis - Returns all items that would intersect based on the X coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
6) y-Axis - Returns all items that would intersect based on the Y coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
Position: The mode for positioning the tooltip. 'average' mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest' will place the tooltip at the position of the element closest to the event position.Background Color: Set Tooltips background-color.Multi-Key Background: Color to draw behind the colored boxes when multiple items are in the tooltip.x-Axis Padding: Padding to add on left and right of tooltip.y-Axis Padding: Padding to add on top and bottom of tooltip.Caret Size: Size, in pixels, of the tooltip arrow.Corner Radius: Radius of tooltip corner curves.

Tooltips Title Settings

Title Font Family: Set the font-family of the tooltip title.Title Font Style: Set the font-style of the tooltip title.Title Font Color: Set the font color of the tooltip title.Title Font Size: Set the font-size of the tooltip title (in pixels).Title Spacing: Spacing to add to top and bottom of each title line.Title Margin Bottom: Margin to add on bottom of title section.

Tooltips Body Settings

Body Font Family: Set the font-family of the tooltip body.Body Font Style: Set the font-style of the tooltip body.Body Font Color: Set the font color of the tooltip body.Body Font Size: Set the font-size of the tooltip body (in pixels).Body Spacing: Spacing to add to top and bottom of each tooltip item.


Animation Settings

Animate Rotate: If true, will animate the rotation of the chart.Animate Scale: If true, will animate the Doughnet from the center.Animation Duration: The number of milliseconds an animation takes.Responsive Animation Duration: Duration in milliseconds it takes to animate to new size after a resize event.Hover Animation Duration: Duration in milliseconds it takes to animate hover style changes.


Datapoint Settings

Dataset Label: The label for the datapoints which appears in the legend and tooltips. (CSV, Comma Separated Values)Datapoints - i.e. 5,10,15, ...: Data values separated by comma's. (CSV, Comma Separated Values)Dataset Border Width: Set the border-width for the datapoints.Datapoint Background Color: Set the background-color for the datapoints.Datapoint Hover Background Color: Set the hover background-color for the datapoints.Datapoint Border Color: Set the border-color for the datapoints.Datapoint Border Hover Color: Set the hover border-color for the datapoints.Datapoint Border Hover Width: Set the border hover border-width for the datapoints (in pixels).