Appearance

13 Feb 20197 minutes to read

Built-in themes

The following are the built-in themes available in the pivot chart:

• flatlight
• gradientlight
• gradientdark
• azure
• azuredark
• lime
• limedark
• saffron
• saffrondark
• gradientlight
• gradientdark
• highcontrast01
• highcontrast02
• material
• office365
• bootstrap

By using the theme property, you can set the desired theme in the pivot chart. By default, the “flatlight” theme is applied to the pivot chart.

JAVASCRIPT

$(function()
    {
        $("#PivotChart1").ejPivotChart(
        {
            //....
            //Applying gradient theme
            theme: "gradientlight",
            //....
        });
    });

Pivot chart - area customization

Border customization

To customize the pivot chart border, use the border property in the pivot chart.

JAVASCRIPT

$(function()
    {
        $("#PivotChart1").ejPivotChart(
        {
            //....
            //Customize the Chart border and opacity
            border:
            {
                color: "#FF0000",
                width: 5,
                opacity: 0.35
            },
            //....
        });
    });

Margin customization

The margin property of the pivot chart control is used to add a margin to the chart area at the left, right, top, and bottom of the chart.

JAVASCRIPT

$(function()
    {
        $("#PivotChart1").ejPivotChart(
        {
            //....
            //Change Chart margin to left, right, top and bottom.
            margin:
            {
                left: 40,
                right: 40,
                top: 40,
                bottom: 40
            },
            //....
        });
    });

Background customization

The pivot chart control background can be customized by using the background property in the chart area.

JAVASCRIPT

$(function()
    {
        $("#PivotChart1").ejPivotChart(
        {
            //....
            chartArea:
            {
                //Setting background for Chart area
                background: "skyblue"
            },
            //....
        });
    });

Grid bands customization

By using the alternateGridBand property of the axis, you can provide different colors for grid rows and columns that are formed by the grid lines in the chart area. The odd and even properties are used to customize the grid bands at odd and even positions respectively.

JAVASCRIPT

$(function()
    {
        $("#PivotChart1").ejPivotChart(
        {
            //....
            primaryYAxis:
            {
                //....
                //Customizing horizontal grid bands at even position
                alternateGridBand:
                {
                    even:
                    {
                        fill: "#A7A9AB",
                        opacity: 0.1,
                    }
                },
                //....
            },
            //....
        });
    });

Animation

You can enable the animation by using the enableAnimation property under the commonSeriesOptions of the pivot chart control. It animates the chart series on two occasions - when the chart is loaded for the first time, and when the series type is changed by using the “type” property.

JAVASCRIPT

$(function()
    {
        $("#PivotChart1").ejPivotChart(
        {
            ....
            commonSeriesOptions:
            {
                //Enabling animation in series
                enableAnimation: true,
                //....
            },
            //....
        });
    });