Chart Component

How to Create a Chart

• 1

  Add a Chart Component

  Inside a Band

  • Add a Band with the desired number of columns to the page.
  • Inside a column, select the Add Component button.
  • Select Chart from the Choose Component dialogue box.

  Inside a Tabs/Accordion

  • Expand Advanced Settings.
  • Choose the desired Sidebar:
    • First Sidebar content appears before the Item Text of the Tabs/Accordion Item.
    • Second Sidebar content appears after the Item Text of the Tabs/Accordion Item.
  • Select the caret to expand the Component menu.
  • Select Add Chart.

  Chart Type

  • For Line Chart instructions, proceed to step 2. 
  • For Bar Chart instructions, proceed to step 3. 
• 2

  Chart Type: Line Chart

  Fields with an asterisk (*) are required.

  • Title*- Provide a title for the chart. It should describe how the X and Y axes relate to one another.
  • Chart Subtitle - Provide a subtitle for the chart, if needed.
  • Y Label* - Provide a label to describe the vertical axis.
  • X Label* - Provide a label to describe the horizontal axis.
  • Color* - Select the desired color from the available options:
    • Black
    • Blue
    • Red
    • Heat Gradient (Line Chart Only)
  • Alternative Text* - A description of chart data that is read to users with low or no vision.
  • Data CSV Upload* - Upload a Comma-Separated Values (CSV) file to provide your data. This file type can be created in a spreadsheet program like Microsoft Excel. Download a Template
    • Column one of the file should contain the heading and data for the X axis.
    • Column two of the file should contain the heading and data for the Y axis.

  Additional Line Chart Options

  • Line Tension - The line tension controls how curved or straight the line appears between each data point. The default setting is 0.5. Adjust the line tension as desired:
    • Increase tension to curve the line.
    • Decrease tension to straighten the line.
  • Show Data Points - Check this box to show each data point along the line. 

  Accordion

  Line Chart Style Examples

  • Line Tension 0.5, Black Line, No Data Points
  • Line Tension 0.1, Blue Line, No Data Points
  • Line Tension 0.9, Red Line, No Data Points
  • Line Tension 0.5, Heat Gradient Line, With Data Points

  Tab/Accordion Items

  Line Tension 0.5, Black Line, No Data Points

  First Sidebar

  • Line Tension: 0.5
  • Color of Line: Black
  • Show Data Points: unchecked

  Line Tension 0.1, Blue Line, No Data Points

  First Sidebar

  • Line Tension: 0.1
  • Color of Line: Blue
  • Show Data Points: unchecked

  Line Tension 0.9, Red Line, No Data Points

  First Sidebar

  • Line Tension: 0.9
  • Color of Line: Red
  • Show Data Points: unchecked

  Line Tension 0.5, Heat Gradient Line, With Data Points

  First Sidebar

  • Line Tension: 0.5
  • Color of Line: Heat Gradient
  • Show Data Points: checked
• 3

  Chart Type: Bar Chart

  Fields with an asterisk (*) are required.

  • Title*- Provide a title for the chart. It should describe how the X and Y axes relate to one another.
  • Chart Subtitle - Provide a subtitle for the chart, if needed.
  • Y Label* - Provide a label to describe the vertical axis.
  • X Label* - Provide a label to describe the horizontal axis.
  • Color* - Select the desired color from the available options:
    • Black
    • Blue
    • Red
    • Heat Gradient (Line Chart Only)
  • Alternative Text* - A description of chart data that is read to users with low or no vision.
  • Data CSV Upload* - Upload a Comma-Separated Values (CSV) file to provide your data. This file type can be created in a spreadsheet program like Microsoft Excel. Download a Template
    • Column one of the file should contain the heading and data for the X axis.
    • Column two of the file should contain the heading and data for the Y axis.

  Accordion

  Bar Chart Style Examples

  • Bar Chart with Black Bars
  • Bar Chart with Blue Bars
  • Bar Chart with Red Bars

  Tab/Accordion Items

  Bar Chart with Black Bars

  First Sidebar

  Bar Chart with Blue Bars

  First Sidebar

  Bar Chart with Red Bars

  First Sidebar

This page was last modified on 07/16/2026