Element Details: Chart+Canvas
 Back


Available in: Logi Info Source code name: ChartCanvasIntroduced in: v11.2.040

The Chart Canvas element is the container for data visualized as a chart. Many chart types are supported, including Area, Bar, Line, Scatter, and more.

Add a Series element to the Chart Canvas to specify the chart type. Charts can be combined by adding multiple Series elements to the canvas.

Datalayers can be added under either the Chart Canvas or Series elements. If added under Chart Canvas, all Series will use the same data. Otherwise, each Series has its own Datalayer.

Other elements allow customization of chart axes, legends, and captions.

The Resizer element enables end-user resizing.

By default, Chart Canvas charts are rendered by the browser with SVG technology. For browser versions (IE7-8) which do not support SVG, charts are rendered with VML.

Element Group: Charts, Gauges and GIS Maps



ATTRIBUTES

Click attribute Name to drill down for more information.

NamePossible ValuesDescription
AltText
UserDefined
The Alternate Text is displayed when the browser options have images turned off. The text is also used by browsers that convert text to speech or braille output.
AnimationDuration
UserDefined
Sets the duration of chart animations, in milliseconds. To disable animation, enter a 0 value.
AutoQuicktip
True
False
Enables the display of Quicktips, with automatically determine information, when the mouse is hovered over data points. To create customized Quicktips, add a Quicktip element under the Series element. The default value is "True".
BackgroundColor
UserDefined
Transparent
Sets the background color of the element. Enter a color by name, decimal RGB value, or hex RGB value. Prefix hex values with the pound sign, like #112233.
BackgroundColorTransparency
UserDefined
7
15
0
The related Background Color attribute sets the element’s background color. Background Color Transparency adds transparency to that color. The lowest value of “0” specifies that the background is opaque, with no transparency. At the other end of the scale, “15” specifies a completely transparent background. Use medium-level transparency to allow different chart layers to show through each other.
BorderColor
UserDefined
Transparent
Sets the color of border lines. Enter a color by name, decimal RGB value, or hex RGB value. Prefix hex values with the pound sign, like #112233.
BorderColorTransparency
UserDefined
7
15
0
The related Border Color attribute sets the canvas border line color. Border Color Transparency adds transparency to that color. The lowest value of “0” specifies that the border line is opaque, with no transparency. At the other end of the scale, “15” specifies a completely transparent line. Use medium-level transparency to allow different chart layers to show through each other.
BorderRadius
UserDefined
Sets the amount of rounding for canvas, legend, and data label corners, in pixels.
ChartBorderThickness
UserDefined
Sets the canvas border thickness, in pixels. The default value is 0, for no border.
ChartCaption
UserDefined
Specifies a caption, or title, for the chart, which normally appears at the top of the canvas area.
ChartHeight
UserDefined
The height of the chart image, in pixels.
ChartOrientation
SwapAxes
Default
Allows swapping of the X and Y coordinates. The default value is Vertical, meaning data points are plotted on the Y-axis and labels are listed across the X-axis.
ChartSubCaption
UserDefined
Specifies a sub-caption of the chart, which normally appears below the chart Caption.
ChartWidth
UserDefined
The width of the chart, usually in pixels. For ChartCanvas charts, the value may be a percentage, by specifying the value like "50%".
Class
UserDefined
Sets the Cascading Style Sheet class used by the element. When set, this class will also be used by all child elements that don't have their own class. The class should be defined in the report's style sheet file.
ID
UserDefined
The ID attribute is a pervasive attribute that uniquely identifies an element within a definition file. The ID needs to be a unique value within the definition.
NoDataCaption
UserDefined
None
Default
Specifies text to be shown in the ChartCanvas when no data are returned from the chart's datalayers.
NoDebuggerLink
True
False
When True, the chart will not show a Debugger Trace link icon even when application debugging is enabled. This is helpful when page-level debug icons are desirable during development, but for charts the icons interfere with layout.
PlotBackgroundColor
UserDefined
Sets the color of the chart plot area (the chart “background”). Enter a color by name, decimal RGB value, or hex RGB value. Prefix hex values with the pound sign, e.g. #D5F484
PlotBackgroundColorTransparency
UserDefined
7
15
0
The related Plot Background Color attribute sets the color for the plot area. Plot Background Color Transparency adds transparency to that color. The lowest value of “0” specifies that the plot area is opaque, with no transparency. At the other end of the scale, “15” specifies a completely transparent area. Use medium-level transparency to allow different chart layers to show through each other.
PlotBackgroundImage
UserDefined
Specifies the complete URL of an image to be displayed in the chart plot area (a chart “background” image). Use CSS, rather than this attribute, to specify a background image for the entire canvas.
PlotBorderColor
UserDefined
Transparent
Sets the color of chart plot area border lines. Enter a color by name, decimal RGB value, or hex RGB value. Prefix hex values with the pound sign, e.g. #D5F484.
PlotBorderColorTransparency
UserDefined
7
15
0
The related Plot Border Color attribute sets the color for the plot area border lines. Plot Border Color Transparency adds transparency to that color. The lowest value of “0” specifies that the border line is opaque, with no transparency. At the other end of the scale, “15” specifies a completely transparent line. Use medium-level transparency to allow different chart layers to show through each other
PlotBorderThickness
UserDefined
Sets the chart plot area border line thickness, in pixels. The default value is 0, for no border.
Polar
True
False
Set to "True" to transform Cartesian charts (e.g. Area, Bar, Line, and Spline) into the Polar/Radial coordinate system. The default value is "False".
SpacingBottom
UserDefined
Sets the space between the bottom edge of the chart content (including the plot area and labels) and the bottom border of the chart, in pixels. The default value is 15 pixels.
SpacingLeft
UserDefined
Sets the space between the left edge of the chart content (including the plot area and labels) and the left border of the chart, in pixels. The default value is 10 pixels.
SpacingRight
UserDefined
Sets the space between the right edge of the chart content (including the plot area and any labels) and the right border of the chart, in pixels. The default value is 10 pixels.
SpacingTop
UserDefined
Sets the space between the top edge of the chart content (including the plot area and any captions) and the top border of the chart, in pixels. The default value is 10 pixels.



PARENT ELEMENTS

Click element to drill down for more information.

Body
Column Cell
Crosstab Table Header Column
Crosstab Table Label Column
Crosstab Table Summary Column
Crosstab Table Value Columns
Data Calendar Rows
Data Multi-Column List
Data Table Column
Data Tree Branch
Division
Fieldset Box
HTML Tag
List Item
Map Marker Image
Map Marker Info
More Info Row
More Info Row Column
Panel Content
Popup Panel
Rectangle
Report Footer
Report Header
Responsive Column
Tab Panel
Tooltip Panel


CHILD ELEMENTS

Click element to drill down for more information.

Caption Style
Chart Export
DataLayer.ActiveSQL
DataLayer.Cached
DataLayer.CSV
DataLayer.Definition List
DataLayer.Directory
DataLayer.Excel
DataLayer.Fixed Format File
DataLayer.Google App
DataLayer.Google Spreadsheet
DataLayer.JSON
DataLayer.LDAP
DataLayer.Linked
DataLayer.MDX
DataLayer.Mongo Find
DataLayer.Mongo Map Reduce
DataLayer.Mongo Run Command
DataLayer.Plugin
DataLayer.REST
DataLayer.SP
DataLayer.SQL
DataLayer.Static
DataLayer.Twitter
DataLayer.Web Feed
DataLayer.Web Scraper
DataLayer.Web Service
DataLayer.XML
Group Drillthrough
Legend
No Data Caption Style
Resizer
Series.Area
Series.Area Range
Series.Area Spline
Series.Area Spline Range
Series.Bar
Series.Bar Range
Series.Bubble
Series.Funnel
Series.Heatmap
Series.Line
Series.Pie
Series.Pyramid
Series.Scatter
Series.Spline
Series.Waterfall
Series.Whiskers
SubCaption Style
X-Axis
Y-Axis
Zoom Control


 Back to top


 Chart Debug