Skip to main content

VCL Charts: Doughnut View Tutorial. Step 3. Appearance Customization

  • 3 minutes to read

The previous step explained how to display and customize value and total labels for a doughnut series at design time.

VCL Chart Control: Doughnut View Tutorial. Step 3 - The Final Result

This step describes how to add optional visual chart elements and customize general doughnut appearance settings.

Doughnut Series Appearance Customization

Double-click the Chart control to invoke the Chart Designer dialog if it is closed. Select the Countries series.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Select the Countries Series

Adjust Hole Radius

You can shrink or expand the hole at the center of a doughnut series. To do this, expand the View node in the Object Inspector and change the HoleRadius property value.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Adjust Doughnut Hole Radius

As a result, the doughnut series changes accordingly:

VCL Chart Control: Doughnut View Tutorial. Step 3 - The Modified Doughnut Hole Radius

Explode the Doughnut Series

You can visually separate doughnut slices to enhance chart readability. Expand the ExplodedValueOptions node in the Object Inspector and set the Mode property to TdxChartExplodedValueMode.All.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Explode the Doughnut Series

All doughnut slices appear separate from each other.

VCL Chart Control: Doughnut View Tutorial. Step 3 - All Doughnut Slices Are Separate

In addition, you can adjust the distance between separated doughnut slices. Set the Distance property to 15 to increase distance between slices.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Increase the Distance Between Doughnut Slices

This operation reduces slice areas.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Resulting Doughnut Slices

Rotate the Doughnut Series

You can use the StartAngle property to rotate a doughnut series. Assign 60 to this property.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Rotate the Doughnut Series

The displayed doughnut series rotates clockwise as a result.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Doughnut Series Clockwise Rotation

Chart Customization

The Chart control has general settings, such as background fill and border appearance options. In addition, the control allows you to add a number of titles to explain the purpose of displayed diagrams and list additional information.

Add a Main Title

To add a main title, select the Chart control and navigate to the Titles node in the Object Inspector.

VCL Chart Control: Doughnut View Tutorial. Step 3 - The Titles Node

Click the ellipsis button to the right of the Titles node to invoke a built-in collection manager dialog. Then, click the Add New button to create a new chart title.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Add an Empty Title

The newly created chart title is selected automatically. Assign the following string to the Text property in the Object Inspector: 'Land Area By Country'.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Specify the Main Title

The main chart title is positioned above the diagram area.

VCL Chart Control: Doughnut View Tutorial. Step 3 - The Main Chart Title

The main chart title reduces the available diagram area height and shrinks the displayed doughnut. Increase the form height.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Increase Form Height

Add an Additional Chart Title

You can use extra chart titles to display additional information. For example, you can specify the original source of displayed data.

Click the Add New button to create another chart title in the title collection manager dialog.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Add an Extra Title

Assign the following string to the Text property of the newly created chart title: 'From www.nationmaster.com'.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Specify an Extra Title

The created extra chart title appears under the main chart title.

VCL Chart Control: Doughnut View Tutorial. Step 3 - An Extra Title at the Default Position

To move the extra title to the bottom-right corner of the Chart control, follow the steps below:

  1. Set the Alignment property to TdxAlignment.Far.
  2. Change the Position property to TdxChartTitlePosition.Bottom.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Move the Created Extra Title

The extra title is in the target position but its font size is too large.

VCL Chart Control: Doughnut View Tutorial. Step 3 - The Extra Title at the Target Position

To reduce the extra title’s font size, follow the steps below:

  1. Expand Appearance and FontOptions nodes in the Object Inspector.
  2. Set the Size property to 10.

VCL Chart Control: Doughnut View Tutorial. Step 3 - Shrink Extra Title Font Size

The image below shows the extra title’s final appearance.

VCL Chart Control: Doughnut View Tutorial. Step 3 - The Final Result

Result

Build the project and run the resulting application. Click check boxes in the legend to hide or display the corresponding doughnut slices and their value labels.

VCL Chart Control: Doughnut View Tutorial. Step 3 - The Chart Control-Based Application in Action

See Also