Skip to main content

VCL Charts: Doughnut View Tutorial. Step 2. Configure Value and Total Labels

  • 3 minutes to read

The previous step explained how to add a Chart control, apply a skin to the application, create a doughnut series, and bind it to data.

This step details how to display and customize value and summary labels.

VCL Chart Control: Doughnut View Tutorial. Step 2 - The Custom Total Label

Series Value Labels

The Chart control offers multiple options that can enhance diagram readability. For example, you can display labels for series values.

Double-click the Chart control to invoke the Chart Designer dialog. Select the Countries series.

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

Display Value Labels

Expand View and ValueLabels nodes in the Object Inspector and set the Visible property to True to display value labels.

VCL Chart Control: Doughnut View Tutorial. Step 2 - Display Value Labels

Value labels are visible inside the corresponding doughnut slices.

VCL Chart Control: Doughnut View Tutorial. Step 2 - Value Labels are Visible Inside Doughnut Slices

Move Value Labels Outside

Value labels do not fit into the corresponding doughnut sectors and partially overlap each other. To display value labels outside the doughnut, set the Position property to one of the following values:

Outside
Value labels are distributed uniformly around the doughnut.
TwoColumns
Value labels are arranged into two columns to the left and right of the doughnut.

VCL Chart Control: Doughnut View Tutorial. Step 2 - Arrange Value Labels in Two Columns

Reduce the Line Length of Value Labels

Value labels and lines that connect them to the corresponding doughnut slices occupy the diagram area to the left and right of the doughnut and shrink it.

VCL Chart Control: Doughnut View Tutorial. Step 2 - Value Labels are Outside the Doughnut Area

To free up more diagram area for the doughnut, reduce the LineLength property value to 14.

VCL Chart Control: Doughnut View Tutorial. Step 2 - Reduce the Line Length of Value Labels

The doughnut occupies a larger portion of the diagram area as a result.

VCL Chart Control: Doughnut View Tutorial. Step 2 - The reduced Line Length of Value Labels

Customize Value Label Formatting

Value labels support multiple formatting patterns. For example, you can limit the number of decimal places and add a measurement unit to every value. To do this, assign the following formatting pattern to the TextFormat property: {V:0.00}M km².

VCL Chart Control: Doughnut View Tutorial. Step 2 - Apply a Formatting Pattern to Value Lables

As a result, value labels change as follows:

VCL Chart Control: Doughnut View Tutorial. Step 2 - A Custom Value Label Formatting Pattern

Adjust Value Label Font Size

You can change value label font size. Expand Appearance and FontOptions nodes in the Object Inspector. Set the Size property to 10.

VCL Chart Control: Doughnut View Tutorial. Step 2 - Change Label Font Size

Value labels change as follows:

VCL Chart Control: Doughnut View Tutorial. Step 2 - Custom Label Font Size

Total Label Customization

The Total label displays the sum of all simple series values. You can assign a custom formatting pattern to the Total label the same way you did for series value labels. Expand the TotalLabel node in the Object Inspector and assign the following formatting pattern to the TextFormat property: {V:0.00}M km².

VCL Chart Control: Doughnut View Tutorial. Step 2 - Apply a Formatting Pattern to the Total Label

The Total label changes as follows:

VCL Chart Control: Doughnut View Tutorial. Step 2 - The Custom Total Label

Next Step

The next step explains how to add optional visual chart elements and customize general series appearance settings.

See Also