Horizontal Bar Chart Options

These settings will affect the display of the individual Horizontal Bar chart. Additional new Horizontal Bar charts can be made or an existing Horizontal Bar chart can be duplicated and edited independently of the original Horizontal Bar 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.


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

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.


Scale x-Axis Settings

Display: If true, show the scale including gridlines, ticks, and labels.Grid Line Display: Display grid lines?Draw Border: If true draw border on the edge of the chart.Draw Ticks: If true, draw lines beside the ticks in the axis area beside the chart.Type: Type of scale being employed.Position: Position of the scale.Stacked?: Stack display of scale.Border Dash: Length and spacing of dashes, i.e 5, 10, etc.Line Width: Width of grid lines.Color: Color of the grid lines.Tickmark Length: Length in pixels that the grid lines will draw into the axis area.Zeroline Width: Width of the grid line for the first index (index 0).Zeroline Color: Color of the grid line for the first index (index 0).Display Title?: Display x-axis Title on front-end?Title: Set x-axis TitleFont Family: Font family for the scale title, follows CSS font-family options.Font Style: Font style for the scale title.Font Color: Font color for the scale title.Font Size: Font size for the scale title (in pixels).Display Ticks?: If true, show the ticks.Reverse?: Reverses order of tick labels.Auto Skip: If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what.Auto Skip Padding: Padding between the ticks on the horizontal axis when autoSkip is enabled. Note: Only applicable to horizontal scales.Label Offset: Distance in pixels to offset the label from the centre point of the tick (in the y direction for the x axis, and the x direction for the y axis). Note: this can cause labels at the edges to be cropped by the edge of the canvas.Font Family: Font family for the tick labels.Font Color: Font color for the tick labels.Font Size: Font size for the tick labels (in pixels).Font Style: Font style for the x-scale title.Padding: Padding between the tick label and the axis. Note: Only applicable to horizontal scales.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.Begin At Zero: if true, scale will include 0 if it is not already included.Data Value Min: User defined minimum number for the scale, overrides minimum value from data.Data Value Max: User defined maximum number for the scale, overrides maximum value from data.Max Ticks Limit: Maximum number of ticks and gridlines to show. If not defined, it will limit to 11 ticks but will show all gridlines.Fixed Step Size: User defined fixed step size for the scale. If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.Step Size: If defined, it can be used along with the min and the max to give a custom number of steps.Suggested Max: User defined maximum number for the scale, overrides maximum value except for if it is lower than the maximum value.Suggested Min: User defined minimum number for the scale, overrides minimum value except for if it is higher than the minimum value.


Scale y-Axis Settings

Display: If true, show the scale including gridlines, ticks, and labels.Type: Type of scale being employed.Position: Position of the scale.Stacked?: Stack the display.Grid Line Display: Display grid lines?Border Dash: Length and spacing of dashes, i.e 5, 10, etc.Line Width: Width of grid lines.Color: Color of the grid lines.Draw Border: If true draw border on the edge of the chart.Draw Ticks: If true, draw lines beside the ticks in the axis area beside the chart.Tickmark Length: Length in pixels that the grid lines will draw into the axis area.Zeroline Width: Width of the grid line for the first index (index 0).Zeroline Color: Color of the grid line for the first index (index 0).Display Title?: Display y-axis Title on front-end?Title: Set the y-axis Title.Font Color: Font color for the scale title.Font Family: Font family for the scale title, follows CSS font-family options.Font Size: Font size for the scale title (in pixels).Font Style: Font style for the scale title.Ticks Display?: If true, show the ticks.Auto Skip: If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what.Auto Skip Padding: Padding between the ticks on the horizontal axis when autoSkip is enabled. Note: Only applicable to horizontal scales.Font Color: Font color for the tick labels.Font Family: Font family for the tick labels.Font Size: Font size for the scale title (in pixels).Font Style: Font style for the scale title.Label Offset: Distance in pixels to offset the label from the centre point of the tick (in the y direction for the x axis, and the x direction for the y axis). Note: this can cause labels at the edges to be cropped by the edge of the canvas.Mirror: Flips tick labels around axis, displaying the labels inside the chart instead of outside. Note: Only applicable to vertical scales.Padding: Padding between the tick label and the axis. Note: Only applicable to horizontal scales.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.Reverse?: Reverses order of tick labels.


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