|Component||Bar / Line Charts (Series)|
|Overview||Use bars and lines to visualize categorical data sets, such as months, years, age groups, product types, and more.|
|Key Features||Stack Bars, Lines, or Areas in the chart
Add multiple axes or series to the chart
Style each Series as a line or bar
Customize the appearance of the X and Y axes
Assign indicators to Bars, Lines, and Areas
Use zoom to display segments of data.
Important: Series and X axis values are limited to 1000 points per Klip.
The Bar/Line chart component allows you to display one or more series of data on a chart. You can use bars, lines or a combination of the two to visualize your data and add as many series to the chart as you want. Here is an example of this component using both bars and lines.
To add this Klip to your Dashboard account click this link. Example Klip - Bookings QTD
If you are not already logged into your Dashboard account you will be prompted to log in and the Klip will be automatically added.
This is an example of the typical structure of the Bar/Line chart component:
Tip! Add extra Series and Y-Axes using the buttons beside the Klip preview.
This section provides examples of different ways to use the Bar/Line chart component.
Inverting the Axes in your chart is ideal if your data sets contains a single data point for each category you want to chart.
To add a similar Klip to your Dashboard account click this link. Example Klip - Incremental Sales By Campaign
To invert the X and Y axes
- Select the Chart component from the tree.
- Select the Switch position of X and Y axes option.
- Adjust the properties of the X and Y axis accordingly.
Stacking Series can help frame each data set within the "big" picture. Series are stacked based on their style, so Bars will be stacked with other Bars, and Lines with other Lines.
To stack Series
- Select the Chart component from the tree.
- Select the appropriate stacking option based on the style of series you want to stack.
Customizing the color for each series of data can help distinguish between similar data sets and add perspective to your chart. This example also shows a chart that uses both lines and bars.
To customize colours
- Select the appropriate Series from the tree.
- Open its Properties panel.
- Select the Override the default color option.
- Use the Color menu to select a new color for the series.
X Axis Formatting
Select the Properties tab for the X Axis to set the format of the X axis values as well as control grid lines, tick marks and labels.
Note that setting Label Drop to Auto only works when Label Angle is set to horizontal (---).
By using multiple Y-Axes, you can display different, but related data sets such as number of visitors (raw figure) and goal completion rate (percentage).
To use multiple Axes
- Click the
+ Y-Axisbutton to add a Y-Axis.
- Provide a unique name for each Y-Axis
- For each Series component, select which of the available Y-axes to use.
Tip! If you switch the axis' position for one of your Y-axes, it will make seeing the information in chart much easier.
Using indicators in charts
You can set up indicators for any line or bar series in your chart.
To set up indicators for a series
- Select the Series to which to apply indicators.
- Open the Indicators panel.
- Set the condition for if:
- Set the reaction for then:.
To hide and display chart series
You can hide a series by default in the Klip Editor.
- In the Klip Editor, on the Component Tree, select the Series you would like to hide.
- On the Properties panel, at Visibility, select Hide this series by default.
- Save your Klip.
- On your dashboard, the hidden series will not appear until you click the name of the series.
Using zoom to display segments of data
You can enable zoom on your series charts (bar/line and scatter/bubble) to display specific portions of data along the X axis, Y axis, or both axes.
To enable zoom:
- In the Klip Editor, on the Component Tree, select Bar/Line Chart.
- On the Properties panel, at Allow Zoom, click the dropdown menu and choose the zoom option you want to use.
- Click Save and Exit.
To use zoom:
- On your dashboard, highlight a portion of your chart. The selected portion will expand to allow a more granular view of your data.
- If you choose Along X axis only, move your mouse pointer across your chart to highlight the data you want to expand.
- If you choose Along Y axis only, move your mouse pointer up or down your chart to highlight the data you want to expand.
- If you choose Along both X axis and Y axis, move your mouse pointer in any direction to highlight the data you want to expand.
- Click Reset zoom to bring the display back to its actual size.
Now that you know more about the Bar/Line Chart component, check out these tutorials:
These articles provide essential information about Klip building that you can apply to your Bar/Line chart components: