Skip to main content

VCL Charts: Line View Tutorial. Step 4. Chart Appearance Customization

  • 5 minutes to read

The previous step explained how to display value markers and labels, customize line appearance, and change legend pane position.

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

VCL Chart Control: Line View Tutorial. Step 4 - The Final Result

Axis Customization

The axis of arguments (X-Axis) and the axis of values (Y-Axis) form a two-dimensional Cartesian coordinate system. Axis-related settings allow you to display grid lines, highlight interlaced diagram areas associated with an axis, add an axis title, and adjust an axis scale.

Display Vertical Grid Lines

The chart already displays horizontal grid lines. To add vertical grid lines to the diagram, follow the steps below:

  1. Select dxChartControl1XYDiagram1 in the Chart Designer dialog.

    VCL Chart Control: Line View Tutorial. Step 4 - Select the Diagram

  2. Expand the following nodes in the Object Inspector: AxesAxisXGridlines.

  3. Set the Visible property to True.

    VCL Chart Control: Line View Tutorial. Step 4 - Display Vertical Major Grid Lines

As a result, the diagram displays both horizontal and vertical major grid lines.

VCL Chart Control: Line View Tutorial. Step 4 - Horizontal and Vertical Major Grid Lines

Highlight Vertical Interlaced Diagram Areas

Like grid lines, interlacing can improve chart readability. To enable this effect, set the Interlaced property to True in the AxisX node in the Object Inspector.

VCL Chart Control: Line View Tutorial. Step 4 - Enable Vertical Interlacing

The fill effect within vertical interlaced areas complements horizontal and vertical grid lines within the diagram area.

VCL Chart Control: Line View Tutorial. Step 4 - Vertical Interlacing

You can customize the fill effect within the interlaced areas if necessary. For example, you can hatch these areas with diagonal lines:

  1. Make sure that dxChartControl1XYDiagram1 is selected.
  2. Expand the following nodes in the Object Inspector: AxesAxisXAppearanceInterlacedFillOptions.
  3. Set the Color2 property to $00000000.
  4. Change the Mode property value to TdxFillOptionsMode.Hatch.
  5. Assign TdxFillOptionsHatchStyle.BackwardDiagonal to the HatchStyle property.

    VCL Chart Control: Line View Tutorial. Step 4 - Enable a Diagonal Hatch Effect

The current diagram appearance changes as follows:

VCL Chart Control: Line View Tutorial. Step 4 - Diagonally Hatched Vertical Interlaced Areas

Tip

Refer to the TdxFillOptions class description for detailed information on all available area fill options.

Emphasize Axes Visually

You can also visually emphasize axis lines and tick marks. For example, you can change width and color for argument and value axes:

  1. Make sure that dxChartControl1XYDiagram1 is selected.
  2. Expand the following nodes in the Object Inspector: AxesAxisXAppearance.
  3. Set the Color property to clLime.
  4. Change the Thickness property value to 2.

    VCL Chart Control: Line View Tutorial. Step 4 - Customize the Appearance of the Axis of Arguments

  5. Expand the following nodes in the Object Inspector: AxesAxisYAppearance.

  6. Set the Color property to clLime.
  7. Change the Thickness property value to 2.

    VCL Chart Control: Line View Tutorial. Step 4 - Customize the Appearance of the Axis of Values

As a result, the axes stand out compared to the diagram area.

VCL Chart Control: Line View Tutorial. Step 4 - Visually Emphasized Axes

Add an Axis Title

You can add a title to an axis. Axis titles are particularly useful for numeric axes.

For example, you can add a title to the axis of values:

  1. Make sure that dxChartControl1XYDiagram1 is selected.
  2. Expand the following nodes in the Object Inspector: AxesAxisYTitle.
  3. Assign the following text string to the Text property: 'Population mid-year, in millions'.

    VCL Chart Control: Line View Tutorial. Step 4 - Add an Axis Title

The axis of values displays the assigned title.

VCL Chart Control: Line View Tutorial. Step 4 - The Axis of Values with a Title

Chart Customization

The Chart control has general appearance and behavior settings, such as zoom, scroll, and background fill options. The control also 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: Line View Tutorial. Step 4 - The Chart Control's Titles Node

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

VCL Chart Control: Line View Tutorial. Step 4 - Create a New Chart Title

The newly created chart title is automatically selected. Assign the following string to the Text property in the Object Inspector: 'Historic, Current, and Future Population Projection'.

VCL Chart Control: Line View Tutorial. Step 4 - Assign Main Title Text

The main chart title is positioned above the diagram area.

VCL Chart Control: Line View Tutorial. Step 4 - The Main Chart Title

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: Line View Tutorial. Step 4 - Add an Extra Chart Title

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

VCL Chart Control: Line View Tutorial. Step 4 - Assign Extra Title Text

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

VCL Chart Control: Line View Tutorial. Step 4 - The Default Extra Title Position

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

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

    VCL Chart Control: Line View Tutorial. Step 4 - Move the Extra Title

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

VCL Chart Control: Line View Tutorial. Step 4 - The Extra Title is in the Target Position

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

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

    VCL Chart Control: Line View Tutorial. Step 4 - Reduce Font Size

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

VCL Chart Control: Line View Tutorial. Step 4 - The Final Result

Result

Build the project and run the resulting application. Hold down the right mouse button, move the mouse pointer diagonally, and release the right mouse button to test marquee zoom functionality. Then, you can drag the diagram area to pan it. Finally, you can rotate the mouse wheel while holding the Ctrl key to zoom the diagram area in or out.

VCL Chart Control: Line View Tutorial. Step 4 - The Chart Control-Based Application in Action

See Also