How to: Use Themes to Define the Look and Feel of Your Chart

• Jun 07, 2019

This example demonstrates how to apply a theme that defines the overall look and feel of a chart by painting its main elements.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-use-themes-to-define-the-look-and-feel-of-your-chart-e4553.

MainWindow.xaml

<Window x:Class="ChartTheme.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        xmlns:core="http://schemas.devexpress.com/winfx/2008/xaml/core"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <!--Make sure to add the corresponding assembly to the References list of your project, 
        and define the ThemeManager.ThemeName property at the chart control's level.-->
        <dxc:ChartControl  core:ThemeManager.ThemeName="LightGray">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.Series>
                        <dxc:LineSeries2D DisplayName="Series 1">
                            <dxc:LineSeries2D.Points>
                                <dxc:SeriesPoint Argument="A" Value="-120" />
                                <dxc:SeriesPoint Argument="B" Value="270" />
                                <dxc:SeriesPoint Argument="C" Value="-160" />
                                <dxc:SeriesPoint Argument="D" Value="340" />
                            </dxc:LineSeries2D.Points>
                        </dxc:LineSeries2D>
                        <dxc:LineSeries2D DisplayName="Series 2">
                            <dxc:LineSeries2D.Points>
                                <dxc:SeriesPoint Argument="A" Value="120" />
                                <dxc:SeriesPoint Argument="B" Value="-270" />
                                <dxc:SeriesPoint Argument="C" Value="160" />
                                <dxc:SeriesPoint Argument="D" Value="-340" />
                            </dxc:LineSeries2D.Points>
                        </dxc:LineSeries2D>
                    </dxc:XYDiagram2D.Series>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Legend>
                <dxc:Legend />
            </dxc:ChartControl.Legend>
            <dxc:ChartControl.Titles>
                <dxc:Title Content="How to Use Themes" />
            </dxc:ChartControl.Titles>
        </dxc:ChartControl>
    </Grid>
</Window>