Chart View Tutorial. Step 4: Customizing The Diagram
- 2 minutes to read
The previous topic finished with customizing the View by arranging the data series, chart legend and chart title. The result is demonstrated in the following screenshot:
This topic explains how to customize the layout and the appearance of Chart Views using the properties of the chart diagrams.
Each diagram provides an extended set of options which control the appearance of the diagram elements such as the axes and their titles, data markers, tick marks and their labels. All the options, which control the appearance aspects such as the position, orientation and alignment of the diagram elements, are initialized with default values that provide a standard appearance for charts. There are two possible ways to access the properties of a specific diagram. Select a Chart View using the Structure Navigator, Component Editor, or View selector. Now you can either right-click the Chart View box and select the required diagram from the context menu (this results in the properties of the selected diagram being shown within the Object Inspector) or expand the property which corresponds to the diagram (for instance, DiagramBar for a bar diagram) in the Object Inspector. The properties are self- explanatory and are grouped by the diagram elements.
Let’s assign a title for the category axis which represents the base for data markers (bars) and is the axis where categories (car models) are labeled. To do this, expand the DiagramBar property, then expand the AxisCategory and Title properties to access the properties of the category axis title. Set the Text property to “Car Models”. The result is shown in the screenshot below.
As you can see, the title of the category axis is displayed vertically and centered along the axis. To align the title to a specific side of the chart’s plot area, use the Alignment property.
To provide details on the series values displayed let’s display the captions of the series values (the data labels on the series values) outside the corresponding data markers and aligned to the end of the data markers. To do this, expand the Values property and set the CaptionPosition property to cdvcpOutsideEnd. The result is shown in the image below.
So far we haven’t modified the style settings of the elements we arranged within the Chart View. They were painted using the default styles. See the next topic for details on improving the grid’s appearance.