Rise 360: How to Use Chart Blocks

Article Last Updated

This article applies to:

Chart blocks in Rise 360 let you transform your data into beautiful and engaging bar, line, and pie charts. Learners can hover over each data point to see details. Here’s how they work.

  1. Insert a Chart Block
  2. Modify the Chart Block
  3. Customize the Block Settings
  4. Accessibility Information

Step 1: Insert a Chart Block

  1. Open a Rise 360 course, then edit an existing blocks lesson or create a new one.
  2. Select All Blocks from the blocks shortcut bar.
    OR
    Click the insert block icon that appears when you mouse over a boundary between blocks.
  3. From the sidebar, choose the Chart category, then select which chart type you’d like to use: Bar, Line, or Pie.

Step 2: Modify the Chart Block

Enter titles as well as item and value labels to personalize your chart.

  1. Hover over the block to access the left-hand design toolbar. Click the Content icon.
  2. Enter the chart title as well as the item and value labels for your chart in the sidebar.
  3. Each chart can display up to 12 items and values. Item labels can be up to 30 characters long (including spaces). Values don’t have a limit. Keep in mind that negative values are ignored on pie charts, but will display on bar and line charts.

    For pie charts, you can also select colors for individual items by clicking the color icon to the right of the item label. Line and bar charts use the course's default color but can be modified in the format settings.
  4. Drag item/value pairs up and down the list to reorder. To delete an item/value pair, hover over it in the sidebar and click the icon that appears.
  5. When you’re finished, click the X in the upper right corner to close the sidebar and return to your lesson. 

Change the chart type by hovering over your chart block and clicking the block type menu that appears. Choose between bar, line, or pie.

Step 3: Customize the Block Settings

Modify how your content looks on the screen by hovering over an existing block to access the left-hand design toolbar. Click the Style icon to access block background options. The Format menu provides options for changing the block. padding, chart color, line type, and percentage type. If you customize your chart color, click Clear to have the line or bar chart display in your theme color. 

You can also apply Heading Levels. These provide structure to your content to make it more accessible when read by assistive devices. 

If you change the background color of the block, the item and value labels will switch to black or white so that they remain visible.

Accessibility Information

Chart blocks are mostly accessible. Currently, charts aren't directly keyboard accessible. If you use this block, provide an alternative method, like a table block, to present the chart data. Additionally, conduct testing with keyboard navigation and screen readers.

Looking for more accessibility design tips or resources? Check out the following: