Chart
Last updated
Last updated
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.
The visibility property is common to most Blocks;
See the Common Properties article for more details on common appearance properties.
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.
This determines if the legend can be seen or if it is hidden.
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.
This determines the placement of the legend around the graph.
The export button will be displayed on top. Clicking the button will export the Chart in a PNG format.
The print button will be displayed on top. Clicking the button will print the Chart.
When this is enabled, configured Action properties are triggered when the user clicks on the chart.
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.
Changing the type will affect the X-Axis. Depending on the type, X-Axis can only accept the selected type. This property is available for both Y and X Axes.
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.
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.
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.
This determines if the grid lines within the Chart are displayed. This property is available for both X and Y axes.
This changes the color of the grid lines within the Chart. This property is available for both X and Y axes.
This changes the color of the title within the Chart. This property is available for both X and Y axes.
This toggles the visibility of the labels that show on the X-axis. This property is available for both X and Y axes.
The colors of the label that shows along the X-axis can also be changed.
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.
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.
This specifies how large the intervals are between values on the Y-Axis. This property is only available on the Y-Axis.
This indicates which side the Y-axis is displayed on. This property is only available on the Y-Axis.
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.
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 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.'
In Charts, the action is triggered by clicking on a series.
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.
Action properties are not triggered unless Show Drilldown under Appearance is enabled.
