Chart Component

How to create basic, accessible data charts in Digital Commons

Summary

Charts visually communicate data trends to your website visitors in a way that is both responsive and accessible. Charts can be placed on Site Pages and Landing Pages. You have control over the appearance of the line and its data points. A button provides users the data as a table, if desired. 

Audience

Editors, Publishers, and Web Managers can create Charts. 

Learn more about Platform User Roles and Permissions.

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

    Complete All Required Fields

    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.
    • 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. 
    • Color of Line* - Select the desired color from the available options:
      • Black
      • Blue
      • Red
      • Heat Gradient
    • 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.
  • 3

    Examples of Various Styles

    Accordion
    Tab/Accordion Items

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

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

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

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