Installation

1. Download and Install

   • Install the component from OutSystems Forge into your environment.

   • Once installed, the asset will be available in your Service Studio under Dependencies.

2. Add to Your Screen

   • Drag and drop the Highcharts Donut Chart block into your screen or web block where you want the chart to appear.
     
     
     

Configuration

1. Provide Data

   • Pass your data to the component through the DataPointsList input.

   • DataPointsList works exactly the same way as the data you provide in the native OutSystems Charts.

2. Customize or Add HighchartsJS

   • To customize the chart or use a new Highcharts configuration:

     • Go to InitGraph → JavaScript1 inside the component.

     • Paste or edit the Highcharts JS code (you can copy examples directly from Highcharts Demo).

   • Example: add donut inner size, legends, colors, tooltips, etc.

3. Special Features

   • Total in Center: Enable this option in the chart JS to show the total value in the middle of the donut.

   • Advanced Legends & Colors: Customize directly in the Highcharts JS config.