How to build Bar/Line Chart components


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

Component Structure

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.

Key Features

This section provides examples of different ways to use the Bar/Line chart component.

Invert Axes

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

  1. Select the Chart component from the tree.
  2. Select the Switch position of X and Y axes option.
  3. Adjust the properties of the X and Y axis accordingly.

Stack Series

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

  1. Select the Chart component from the tree.
  2. Select the appropriate stacking option based on the style of series you want to stack.

Custom colors

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

  1. Select the appropriate Series from the tree.
  2. Open its Properties panel.
  3. Select the Override the default color option.
  4. 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 (---).

Multiple Y-Axes

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

  1. Click the + Y-Axis button to add a Y-Axis.
  2. Provide a unique name for each Y-Axis
  3. 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

  1. Select the Series to which to apply indicators.
  2. Open the Indicators panel.
  3. Set the condition for if:
  4. Set the reaction for then:.

To hide and display chart series

You can hide a series by default in the Klip Editor.

  1. In the Klip Editor, on the Component Tree, select the Series you would like to hide.
  2. On the Properties panel, at Visibility, select Hide this series by default.
  3. Save your Klip.
  4. On your dashboard, the hidden series will not appear until you click the name of the series.

Learn more:

Now that you know more about the Bar/Line Chart component, check out these tutorials:

Important concepts

These articles provide essential information about Klip building that you can apply to your Bar/Line chart components:

Feedback and Knowledge Base