Appearance

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",
                //....
            });
        });

    JavaScript pivot chart control rendered with built-in theme

    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
                },
                //....
            });
        });

    Border customization for JavaScript pivot chart control

    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
                },
                //....
            });
        });

    Margin customization for JavaScript pivot chart control

    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"
                },
                //....
            });
        });

    Background customization for JavaScript pivot chart control

    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,
                        }
                    },
                    //....
                },
                //....
            });
        });

    Grid band customization for JavaScript pivot chart control

    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,
                    //....
                },
                //....
            });
        });