InsideSales.com
InsideSales.com
InsideSales.com Menu

How to build Bar and Line Chart components

Highlights


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

Overview

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.

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

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 tab.
  3. Set the Condition.
  4. Set the Reaction.

Bar/Line Chart component Source Code

You can use this Source Code to create multi-component Widgets

{
         "type": "chart_series",
         "displayName": "Chart",
         "fmtArgs": {},
         "vis": true,
         "components": [
            {
               "type": "series_data",
               "displayName": "Series",
               "fmt": "num",
               "fmtArgs": {},
               "role": "series",
               "vis": true,
               "formulas": [],
               "data": [
                  []
               ],
               "color": "#ec932f",
               "overrideColor": false,
               "axis": "af788fe1",
               "leaveGaps": false,
               "lineDashes": "Solid",
               "lineWeight": 3,
               "lineStyle": "angle",
               "chartStyle": "points",
               "showValues": false,
               "renderer": "bar",
               "seriesName": "Untitled"
            },
            {
               "type": "chart_axis",
               "displayName": "X Axis",
               "fmt": "txt",
               "fmtArgs": {},
               "role": "axis_x",
               "vis": true,
               "id": "cccdb9a7",
               "formulas": [],
               "data": [],
               "sort": 0,
               "axisPosition": "left",
               "customInterval": 0,
               "tickInterval": 0,
               "customRange": false,
               "showLabelTicks": true,
               "showAxisScale": true,
               "showAxis": true,
               "originLine": true,
               "grid": false,
               "max": "",
               "min": "",
               "origin": "",
               "customOrigin": false,
               "labelDrop": 1,
               "labelStagger": 1,
               "labelAngle": "0",
               "showLabel": false,
               "label": "Untitled"
            },
            {
               "type": "chart_axis",
               "displayName": "Y Axis",
               "fmt": "num",
               "fmtArgs": {},
               "role": "axis_y",
               "vis": true,
               "formulas": [],
               "data": [],
               "dataDisabled": true,
               "sort": 0,
               "axisPosition": "left",
               "customInterval": 0,
               "tickInterval": 0,
               "customRange": false,
               "showLabelTicks": false,
               "showAxisScale": true,
               "showAxis": true,
               "originLine": true,
               "grid": true,
               "max": "",
               "min": "",
               "origin": "",
               "customOrigin": false,
               "labelDrop": 1,
               "labelStagger": 1,
               "labelAngle": "0",
               "showLabel": false,
               "label": "Untitled"
            }
         ],
         "invertAxes": false,
         "stackAreas": 0,
         "stackLines": 0,
         "stackBars": 0,
         "showLegend": true,
         "showValues": false,
         "height": 2
      }

Release Notes

Find our most recent release notes.

Forum

Our InsideSales.com community forum is coming soon.

Advanced Training Guides

Advanced training for the PowerDialer for Salesforce.

Have questions?

We're happy to help. An InsideSales.com expert is just a phone call away.

(866) 593-2807

Mon-Fri 6-7 MST

Back To Top

© 2004–2014 InsideSales.com, Inc. all rights reserved. Use of the InsideSales.com service and this Web site constitutes acceptance of our Terms of Use and Privacy Policy. InsideSales.com technology is protected by the following United States Patents: 8078605, 8325738, 8352389, 8510382, 8566419.