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.
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.
Display Value Labels
Expand View and ValueLabels nodes in the Object Inspector and set the Visible property to True to display value labels.
Value labels are visible inside the corresponding 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.
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.
To free up more diagram area for the doughnut, reduce the LineLength property value to 14.
The doughnut occupies a larger portion of the diagram area as a result.
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².
As a result, value labels change as follows:
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.
Value labels change as follows:
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².
The Total label changes as follows:
Next Step
The next step explains how to add optional visual chart elements and customize general series appearance settings.