Chart View Tutorial. Step 5: Applying Styles
- 2 minutes to read
The previous topic finished with customizing the View by arranging the diagram elements. The result is shown in the following screenshot:
This topic demonstrates how to improve the grid’s appearance using styles and the Styles Repository.
Navigate to the DevExpress tab of the component palette and drop a TcxStyleRepository control onto the form:
Using the Style Repository, you can create and manage styles. Next we will create a style for the chart title. Double-click the TcxStyleRepository component on the form to invoke the editing dialog. Activate the Styles page and click the Add button to create a new style. Specify a name and set the properties of the created style as follows:
Expand the Style.Font property and set the font size to 12 and font style to fsBold.
Set the Style.Name property to “ChartTitleStyle”.
Set the Style.TextColor property value to clNavy.
After the style has been created and set up, it can be assigned to a Chart View or diagram element. Select the Chart View using the Structure Navigator, Component Editor, or View selector. Expand the Styles property in the Object Inspector. Select the Styles.Title property and use the corresponding combo box to assign the ChartTitleStyle style to the title of the Chart View. The result is shown in the following screenshot:
An easy and straightforward way to add a new style to the Style Repository and apply it to a View element is to use the corresponding entry in the combo box as shown in the following screenshot:
In a similar way you can create and apply the styles to all the visual elements of the Chart View and diagrams such as the chart legend, chart’s plot area, axes, their titles and corresponding gridlines, data markers, tick marks and their labels. The styles can vary from diagram to diagram thus providing a unique appearance for each chart.
For comprehensive information on the Style Repository and using it, see the Style Repository topic.