Created by Smart Sparrow

Bar Chart

This widget will allow you to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent. The bars will be plotted horizontally. It shows comparisons among discrete categories. One axis of the chart shows the specific categories being compared, and the other axis represents a measured value.

Unique ways to use this widget

There are multiple ways you can use this widget. For example:

  • Ask students to make observations based on your chart. They can provide their observations using other widgets such as free form text inputs, multiple choice questions, number sliders, etc.
  • Ask students what is wrong with a chart shown, based on previously learned or provided information.
  • Ask students to select the most appropriate type of graph to display information you provide (as specific graphs are generally best used for different things).


Have a play


Basic setup instructions

  1. This component can be found in the Author. Insert the Charts widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. Set the Serie type to Bar chart.
  4. The Bar chart widget is set entirely via the options menu. You can use various fields here to change various qualities about the chart (eg, title, subtitle etc. ).
  5. Have a look at the CAPI table desciption at the bottom of the article for more information on what you can do.


Other options

  • Using the ‘Series N.labels’ field you can specify the text labels for the different data points within that series using a string of comma separated labels.
  • Using the ‘Series N.colours’ field you can specify the colours of different data points or columns in your series by entering a string of comma separated html colour codes. For example, if you wanted to highlight the three highest numbers in the data series (2,7,8,9,1,3) by putting these in red (and the others in black) your ‘Series 1.colours’ would look like this – (black,red,red,red,black,black) or (#000000,#ff0000,#ff0000,#ff0000,#000000,#000000)
  • It is possible to show a trend line for each series by turning on Series N.showTrendLine


Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services