Pie Chart


This tutorial uses a default datasource to display pie graphs. If you want to use your own data, select the Dynamic Datasource Option within the widget.

Line Chart Elements:
1. Chart
2. Sections
3. Other Tools

Creating new pie chart

  1. Change the type to “Pie Chart”
    Change type

  2. Choose your data type and datasource. Note: the datasources in the example below were created previously and not default. Modify Chart Data

  3. Click Magic Wand to automatically populate the graph with generated recommendations based on the data types.

Fill in graph

The rest of the tabs are for editing the graph itself


Change the margin measurements for the graph


This is used to give each section a fill color. Click Next Slice to add more colors. Hover over colors to reveal the trash can for deletion.

Other Tools

Key Description Example
Label Displays labels for each section
Tooltip Display data box on hover
Inner Radius Creates a circle in the middle of the chart
Unique Style Overrides the overall style settings to change a specific setting.It is automatically checked when you change a style
HTML Id Used to target widget element in the DOM Adds an id to the page like this : <div id="myCustomHtmlId">some text </div>and then write css like this: #myCustomHtmlId { color: red }
Allow Fullscreen Gives the option to make chart fullscreen