Chart Component

create a pie chart to display data

  • pie chart
  • freely adjustable slice sizes
  • different legend options

Use the Chart component to create a freely adjustable pie chart for your data.

on this page:
CMS settings , Opens In New Window Front-end examples , Opens In New Window
Step by step , Opens In New Window

Introduction

The Chart component provides an easy way to create pie charts. The pie slices can be freely added or removed and their sizes can be freely adjusted. There is also a small variety of styling options for the legend and tooltips available.

Glossary:

Example:

CMS settings

tab: General

In the General tab, the legend can be written in a Rich Text Editor and some styling choices can be made.

 

tab: Data

In the Data tab, the slices of the pie chart are configured.

Please note that the Chart component does not check if your values add up to 100%. If they add up to less or more than 100%, the pie chart will still be displayed and a mistake might go unnoticed, so please always check your entries.

Front-end examples

Without Legend

With Legend

With Legend  |  Description in Tooltip Checked

With Legend  |  Labels in Legend Checked

With Legend  |  Show Value Checked

With Legend  |  Description in Tooltip Checked  |  Show Value Checked

With Legend  |  Description in Tooltip Checked  |  Labels in Legend Checked  |  Show Value Checked

Only 1 Slice

2 Slices

2 Slices

10 Slices

20 Slices (Description In Tooltip Checked)

Values Range 1 To 10 

Values Range 100 To 1000

Step by step

1

2

3

Related topics

Used recurring elements