Skip to main content Skip to navigation

H5P Chart

Once you have logged into the H5P website find the Create New Content button (it is usually on the Content tab of your account).

Add the name of your content to the Title field and then choose Chart from the Select content type dropdown menu by clicking on the appropriate Use button.

H5P screen shot

Choose the type of chart you want to add from the Type of chart drop down menu. Then name your first Data element by completing the Name field. In the Value field add the percentage of the chart that you want this data element to fill. Now choose the data element colour and font colour using the Color and Font Color dropdown menus.

H5P Chart screen shot

As a minimum you will need to choose two data elements but you can add more using the Add option button.

H5P chart screen shot

The Text overrides and translations section can be expanded to complete the Text read by readspeakers defining the figure as a chart field. Try to be descriptive when completing this (rather than just saying 'chart' say what it is illustrating so that screenreaders will give those with sight difficulties a fuller understanding of what is on the screen.

If you chose a bar chart instead of a pie chart these fields will remain the same; it is only the resultant chart that changes.

H5P Chart screen shot

Add any tags to the Tags section and choose whether you want to display the buttons listed above with your chart. Personally I would leave all of the buttons checked as per the default settings as it gives both you and your users more flexibility. Then click on the Save button.

If you click on the Embed button at the bottom of the chart module once it has been generated, you can copy the HTML code and embed it into a web page just like this: