Customize a JavaScript Chart Type

You have several JavaScript Chart Templates to use for JavaScript charting. However, if you find one that you would like to customize for your needs you can adjust the JavaScript chart. This article walks you through the process with an example.

Video Tutorial

1. JavaScript Chart Templates (Admin > System > Charting Options)

JavaScript Chart Templates

On the JavaScript Chart Templates screen find the Javascript template that you want to customize and click on it. In this example we click on the Highcharts Line chart.

2. JavaScript Chart Template Editor

JavaScript Chart Template Editor

In the JavaScript Chart Template Editor make your customized changes in the JavaScript Code section

2.1. JavaScript Code

JavaScript Code

Find the section of the JavaScript code to customize. In this example we will make changes to the JavaScript code so that series data will show multiple series instead of just one.

2.2. JavaScript Code - customized

JavaScript Code - customized

In this example we changed the JavaScript code so that the series data now expects an exact multiple number of series

2.3. Save changes

JavaScript Code - save changes

3. Report Settings

JavaScript Chart Template Editor - Google Chrome
  1. If required for use with Dataset Reports, set Enable for Dataset Reports to set to "yes" from the default value of "no"
  2. Optional: Select an Icon to display on Dataset Report chart options
  3. Optional: Input a Description to be displayed in the Dataset Report Editor/Chart Settings

4. Save

JavaScript Chart Template Editor - Google Chrome

Click Save button in upper right corner. Now you can create JavaScript charts from this template, using your customization.