Appearance Customization

To define an appearance for your Chart, you can use themes and palettes. Themes determine the overall look and feel of a Chart by painting its visual elements. Palettes are sets of colors for painting individual series. The documents in this section explain these concepts in greater detail.

Themes

The dxChart and dxPieChart widgets consist of many elements, each of which has options that determine the appearance. The default values of appearance options are united in a theme. The dxChart and dxPieChart widgets use the "default" theme by default. This theme contains appearance settings for the dxChart, dxPieChart and dxRangeSelector widgets. You can customize this theme by setting custom values when defining the dxChart's configuration object. However, if you need to have a custom theme and use it in different charts, implement and new theme. It can be common for several widgets or for one widget, e.g., dxChart. In this topic, you will learn how to implement and use a custom theme.

Show Example:
jQuery

Customize the Default Theme

If you are satisfied with the majority of option values in the "default" theme, but need a few of them to be changed, customize the "default" theme. For this purpose, do the following.

  • Introduce an object for a new theme and give a name to it.

    JavaScript
    var myTheme = {
        name: 'mySuperTheme',   
    };
  • Specify the required theme settings.

    JavaScript
    var myTheme = {
        name: 'mySuperTheme',
        chart: {
            commonSeriesSettings: { 
                label: {
                    connector:{
                        visible: true,           
                        width: 2,
                    }
                }
            }
        }   
    };

    The options that are set in a theme are described in the Reference section. You can change any theme options in your theme.

  • Register your theme, indicating the theme that your theme is based on. For this purpose, use the registerTheme method.

    JavaScript
    DevExpress.viz.core.registerTheme(myTheme,'default');

Implement a Custom Theme

You can implement an entirely custom theme. For this purpose, do the following.

  • Introduce an object for a new theme and give a name to it.

    JavaScript
    var myTheme = {
        name: 'mySuperTheme',   
    };
  • Specify all the theme settings. The options that are set in a theme are described in the Reference section.

  • Register your theme. For this purpose, use the registerTheme method.

    JavaScript
    DevExpress.viz.core.registerTheme(myTheme);

Apply a Custom Theme

To use a custom theme in a chart, set its name to the chart's theme configuration property.

JavaScript
$("#chartContainer").dxChart({
    theme: 'mySuperTheme',
    //...   
});
Show Example:
jQuery

Palettes

Certain charts contain several series at a time. In such instances, a color would need to be set for each of these series individually. The dxChart and dxPieChart widgets come with a set of built-in palettes - sets of colors. With these palettes, you can be sure that the colors mix well with each other and create beautiful charts. If the number of series is greater than the number of colors in the palette, the palette colors are repeated with a slight modification.

The following built-in palettes are available.

Palette Default Palette Soft PastelPalette Harmony Light

The "default" palette is used by default. To apply another palette, use the palette property.

JavaScript
$("#chartContainer").dxChart({
    palette: 'Soft Pastel',
    //...   
});

The following palette customizations are available.

  • Ignore Palette Colors for Particular Series
    When using a predefined palette, you are not limited to setting a custom color for a particular series using the color property.

    JavaScript
    $("#chartContainer").dxChart({
        series: [{
            color: 'red'
            //...
        }, {...}, ...]
    });
  • Declare a Custom Palette within a Chart
    You can set a custom palette for a chart using the palette configuration property. Assign an array of colors to this property.

    JavaScript
    $("#chartContainer").dxChart({
        palette: ['#7CBAB4', '#92C7E2', '#75B5D6', '#B78C9B', '#F2CA84', '#A7CA74'],
        //...   
    });
  • Implement a Custom Palette
    To use a custom palette in different Charts, define and register that palette in the following way.

    JavaScript
    var myPalette = ['#5F8B95', '#BA4D51', '#AF8A53', '#955F71', '#859666', '#7E688C'];
    DevExpress.viz.core.registerPalette('mySuperPalette', myPalette);

    The registered palette can be used in any dxChart or dxPieChart widget. For this purpose, assign the palette to the palette property (see above).