Chart

The Chart is an interactive UI component that visualizes data from local or remote storage using a great variety of series types, including Line, Spline, Area, Spline Area, Bar, Scatter, Bubble, and Range. The Chart allows multiple panes and axes, as well as panning and zooming, and can show and hide specific series by clicking the label.
Chart Properties
Appearance
Common Properties
The visibility property is common to most Blocks;
​See the Common Properties article for more details on common appearance properties.​
Orientation
This determines the direction that the data is presented on the graph. If set to horizontal, the data will be presented from bottom to top. If set to vertical, the data will be presented from left to right.
Legend Visibility
This determines if the legend can be seen or if it is hidden.
Hide Series on Legend Click
When the legend is clicked, and the Hide Series On Legend Click option is enabled, the series that is selected will disappear from the graph.
Alignment
This determines the placement of the legend around the graph.
Allow Export
The export button will be displayed on top. Clicking the button will export the Chart in a PNG format.
Allow Print
The print button will be displayed on top. Clicking the button will print the Chart.
Axes
Y-Axis
The Y-axis is the left-hand vertical axis or part of the graph. You can have multiple Y-axis on a Chart. 
A new Y-axis can be added from the Block Properties tab when a Chart is selected. To add a Y-axis, go to the Block Properties tab, expand Axis, and click on the plus symbol above the list of Y-axes.
If you have multiple panes with multiple series, the Y-axis will only show on the pane that the series is on. In other words, a Y-axis will only be shown on the panes where it is being used. 
Type
Changing the type will affect the X-Axis. Depends on the type, X-Axis can only accept the selected type. This property is available for both Y and X Axes.
Axis Line Color
This specifies the color of the line for the axis. This property is available for both X and Y axes. The Y-Axis line color will change the color of the vertical line of the graph and the X-Axis line color will change the color of the horizontal line of the graph.   
Enable Pan and Zoom
The user can zoom in and out for a better view. If it's enabled, on top of the Chart there will a scroll bar which the user can use to move around. This property is only available for the X-Axis.
Range Start and End
Specify what range the Chart should show by default. If not specified it will show the min and max value of the provided data. If the Chart scroll and zoom are changed, it will override the default values selected. Both X and Y axes ranges can be specified.
When the range is specified, the maximum range for the zoom and pan will be the length of the Chart.
Display Grid Lines
This determines if the grid lines within the Chart are displayed. This property is available for both X and Y axes.
Grid Line Color
This changes the color of the grid lines within the Chart. This property is available for both X and Y axes.
Title Color
This changes the color of the title within the Chart. This property is available for both X and Y axes.
Display Labels
This toggles the visibility of the labels that show on the X-axis. This property is available for both X and Y axes.
Label Color
The colors of the label that shows along the X-axis can also be changed.
Value Margins Enabled
If this is set to 'true', margins are added between the start and end values on the graph. For example, on a bar graph, the margin will move the first bar more to the right so the full bar is inside the graph, and all columns will be equal in width. It will also add a margin between the end and the last bar. 
If this is set to 'false', the first and last bars may not be fully inside the chart, so the middle bars may be larger than the first and last bars.  
This property is only available on the X-Axis.
Tick Positions
This determines the placement of the labels along the axis. If the between labels option is selected, the labels appear in between the ticks. If the cross labels option is selected, the labels appear on the ticks. This property is only available on the X-Axis.
Tick Interval
This specifies how large the intervals are between values on the Y-Axis. This property is only available on the Y-Axis.
Position
This indicates which side the Y-axis is displayed on. This property is only available on the Y-Axis.
Data Source
Common Properties
The Chart has properties that are common to most Blocks: filter, sort, show # of results, and skip # of results;
The Data Source property is required for the Chart.
‌See the Common Properties article for more details on common data source properties.​
Data/Series
We can add or modify the existing series. ‌For details on common data properties, see this article.
There are 8 main types of Charts, Line, Spline, Area, Spline Area, Bar, Scatter, Bubble, and Range.
Stacked bars are another type of data series. They let you stack bars on top of each other, instead of aligning them next to each other. This is useful when comparing total amounts across each bar group.
Full Stacked column also stacks bars together, however, this is usually in the form of a percentage. Full stacked bars are useful if you want to compare data using a whole and part-to-whole relationship. They stack bars on top of each other
Panes
Panes are sections of the graph that can contain their own series. If there are many series being shown, they can be separated and shown on multiple panes.
A single pane can have multiple series. 
Panes can be modified when creating a series. This can be done by clicking on the 'Edit' button next to 'Panes.'
Action
In Charts, the action is triggered by clicking on a series.
Common Properties
The Chart has properties that are common to most Blocks: Navigate to and Show Confirmation Dialog;
​See the Common Properties article for more details on common action properties.​

Bar Gauge

Circular Gauge

Last modified 5mo ago

Export as PDF

Copy link

Contents