Skip to main content

How to build Bar/Line Chart components

Updated

The Bar/Line Chart component enables 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. Bar charts are great for comparing two or more values that are related categorically, for example, a bar chart comparing total booking sales by region. Line charts are ideal for showing data trends and patterns over time. For example, a line chart showing monthly revenue over the course of a year.

The following example demonstrates how you can use the component to create a chart with both bars and lines. It compares regional bookings between the third sales quarter and the fourth sales quarter using bars and shows the regional sales average as a trend line.

This article includes:

Building with the component tree

When you add a component to a Klip, the structure of that component is outlined in the component tree on the left. Understanding how to navigate the component tree will make it easier to customize your bar/line chart. The following example shows the component tree and Klip Editor workspace for a bar/line chart. All component trees follow the same basic structure. Go here for an introduction to the component tree.

When you add a bar/line chart to your Klip, you work with the following subcomponents:

  • Series: This indicates the data series you are plotting on your chart. When you click Series, you open the series’ Data, Properties, and Indicators tabs. The chart above uses four different series to compare the sales results from different ad campaigns.
  • X Axis: When you click X Axis, you open the X-axis’ Data and Properties tabs. In this example, the X and Y-axes have been inverted (see Inverting the X and Y axes) and the grid lines, tick marks, and labels are hidden based on selections made in the Properties tab. Hiding different axis features can help emphasize your series data by cutting back on clutter. Select the Properties panel 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 (---).
  • Y Axis: When you click Y Axis, you open the Y-axis’ Properties tabs. In the example above the axes are inverted. Tick labels and grid lines are enabled to clarify the differences in value between the four series.

Note: You can add extra Series and Y-Axes using the buttons in the Controls palette to the right of the Klip preview workspace. Learn more about adding multiple Y-Axes.

How do I build a bar/line chart?

The following procedure tells you how to build a basic bar/line chart. You can apply additional customization by exploring the options in the Properties panel. How do I customize a bar/line chart?

Note: Series and X-axis values are limited to 1000 data points per Klip. Consider this when choosing a data source.

To build a bar/line chart:

  1. From your dashboard, click + Add Klip > Build a custom Klip, or, from the Klip Library, click +New custom Klip.
  2. Click and drag the Bar/Line Chart component into your Klip preview workspace.
  3. Click + Add Data Source and select a data source to use.
  4. Assign data to your x-axis by clicking the X Axis subcomponent and selecting the appropriate column from the Data tab.
    Note: If you are using JSON or XML data instead of tabular data, you must locate and select the appropriate element from the hierarchy. Learn more about working with JSON and XML data.
  5. Optionally, if your data set contains repeating labels or includes too many categories to display effectively, you can group your results by checking the box next to Group repeating labels or filter your results by clicking the Add Filter button. Learn more about grouping and filters.
  6. Click the Series subcomponent and select the appropriate column from the Data panel to assign a series.
    Note: If you are using JSON or XML data instead of tabular data, you must locate and select the appropriate element from the hierarchy. Learn more about working with JSON and XML data.
  7. From the Properties tab, at Format as, select the correct format for your data (for example, Currency).
  8. Optionally, at Chart Type, click either the Bar Chart button or the Line Chart button to change your visualization style.
  9. At Series Label, enter a descriptive label for your series.
    Note: You can optionally add another series by accessing the Controls palette and clicking the + button next to Series or Y-Axis.
  10. To change the title that displays on your Klip, click the Klip component in the component tree and, at Klip Title, enter your new title in the field.
  11. To change the name of your Klip (which displays in your list of Klips), click Untitled in the upper-left corner of the screen and enter your text in that field.
  12. Click Save.

How do I customize a bar/line chart?

There are many customization options available to you. Here are a few of them:

Modifying the font size

You can choose a font size for legends, chart values, x-axis titles, and y-axis titles in your bar/line charts.

To choose font sizes:

  1. Select Bar/Line Chart in the component tree.
  2. Click the Properties tab.
  3. At Chart Height, use the drop-down to select the font size for the Legend.
  4. Select Series in the component tree
  5. At Show values, select the box next to Show values on chart.
  6. At Value Size, use the drop-down to select a font size for the Chart Values.
  7. Click X Axis in the component tree.
  8. At Axis Title, select the box next to Show axis title.
  9. At Title Size, use the drop-down to select the font size to use for the X-axis Title.
  10. Click Y Axis in the component tree.
  11. At Axis Title, select the box next to Show axis title.
  12. At Title Size, use the drop-down to select the font size to use for the Y-axis Title.
  13. Click Save.

Applying custom colors

Customizing the color for each series of data can help distinguish between similar data sets and add perspective to your chart.

To apply custom colors:

  1. Select the appropriate Series from the tree.
  2. Open its Properties panel.
  3. At Series Color, click the box next to Override the default color.
  4. Use the color menu to select a new color for the series.
    Note: To use a custom color, at Custom, type a hex color value in the field.
  5. Click Save.

Adding multiple y-axes

By using multiple y-axes, you can display different, but related data sets. In the example below, the number of visitors (raw figure) is charted using the Y-axis on the left while the goal completion rate (percentage) is charted using the Y-axis on the right.

To display both series clearly in a Klip, add a secondary Y-axis and assign each series its own Y-axis. This will ensure that a different format is easily seen and that smaller values display when much larger values are plotted.

To add multiple y-axes:

  1. Click Bar/Line Chart in the component tree.
  2. In the Properties panel, at Axis, click the Add Y-axis button.
  3. Right-click each y-axis in the component tree and click Rename... to provide each y-axis with a unique name.
    This will make it easier to select the correct Y-axis for each series.
  4. For each series subcomponent, navigate to Properties > Use Axis and select the appropriate y-axis from the drop-down.
    Note: Your series must be added to the component tree before you can assign it to a Y-axis. You cannot assign a single series to multiple Y-axes. To add a series, navigate to the Properties panel, and, at Data Series, click the Add Series button.
  5. Click Save.

Inverting the X and Y axes

Inverting the axes in your chart is ideal if your data set contains a single data point for each category you want to compare. The following example compares the cost per lead for different types of marketing engagement.

To invert the X and Y axes:

  1. Click Bar/Line Chart in the component tree.
  2. In the Properties panel, at Invert Axes, check the box next to Switch position of X and Y axes.
  3. Adjust the properties of the X and Y axes accordingly.
    Note: For an inverted Y-axis, at Properties > Axis Position, clicking the left axis position button will display the axis at the bottom of the chart while clicking the right axis position button will display the axis at the top of the chart.
  4. Click Save.

Displaying indicators in charts

You can set up indicators for any line or bar series in your chart. In the example below, an indicator is set to display any value over $400 as a purple bar. Learn more about using indicators.

To display indicators in charts:

  1. Select the series to which you want to apply indicators.
  2. Click the Indicators panel.
  3. Click Add.
  4. Set the condition for If. For example, IF: Visits is greater than 5000.
  5. Set the reaction for then. For example, then: Goals change color.

Hiding a chart series

Choosing which series to display on your chart when you present your Klip will ensure you are highlighting the most relevant information based on your audience. To prepare your Klip for a specific audience, you can use the Properties panel to hide a series by default.

To hide a chart series:

  1. In the component tree, select the Series you would like to hide.
  2. In the Properties panel, at Visibility, select Hide this series by default.
  3. Click Save.
    On your dashboard, the hidden series will not appear until you click the name of the series.

Stacking series

Stacking multiple, related series can help frame each data set within the total of all the data sets in a category. For example, in the chart below, the series for direct, referral, and search based visits are stacked to illustrate each traffic source’s contribution to the total number of visits to a site for a given time period.

Note that series are stacked based on their style, so bars will be stacked with other bars, and lines with other lines.

To stack series:

  1. Click Bar/Line Chart in the component tree.
  2. In the Properties panel, select the appropriate stacking option based on the style of series you want to stack (bars, lines, or areas).
  3. Click Save.

Enabling and using zoom to highlight data

You can enable zoom on your series charts to display specific portions of data along the X-axis, Y-axis, or both axes.

To enable zoom:

  1. In the Component Tree, select Bar/Line Chart.
  2. In the Properties panel, at Allow Zoom, click the drop-down menu and choose the zoom option you want to use.
  3. Click Save.

To use zoom:

  1. 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 chose Along X axis only, click and drag your mouse pointer across your chart to highlight the data you want to expand.
    • If you chose Along Y axis only, click and drag your mouse pointer up or down your chart to highlight the data you want to expand.
    • If you chose Along both X axis and Y axis, click and drag your mouse pointer in any direction to highlight the data you want to expand.

  1. Click Reset zoom in the Klip to bring the display back to its actual size.

Related articles