Appearance

Built-in themes

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.

  • html
  • <%--Using gradient theme--%>
    <ej:PivotChart ID="MyPivotChart1" runat="server" Url="/RelationalChartService.svc"  Theme="GradientLight" ClientIDMode="Static">
      <Size Width="950px" Height="460px"></Size>
    </ej:PivotChart>

    ASP NET 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.

  • html
  • <%--Customize the chart border and opacity--%>
    <ej:PivotChart ID="MyPivotChart1" runat="server" Url="/RelationalChartService.svc"  Border-Width="2" Border-Color="#FF0000" ClientIDMode="Static">
    <Size Width="950px" Height="460px"></Size>
    </ej:PivotChart>

    Border customization for ASP NET pivot chart control

    Background customization

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

  • html
  • <ej:PivotChart ID="MyPivotChart1" runat="server" Url="/RelationalChartService.svc" ClientIDMode="Static">
        <%--Setting background for Chart area--%>
        <ChartArea Background="skyblue"></ChartArea>
        <Size Width="950px" Height="460px"></Size>
    </ej:PivotChart>

    Background customization for ASP NET 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 grid lines in the chart area. The Odd and Even properties are used to customize the grid bands at odd and even positions respectively.

  • html
  • <ej:PivotChart ID="MyPivotChart1" runat="server" Url="/RelationalChartService.svc" ClientIDMode="Static">
        <%--Customizing horizontal grid bands at even position--%>
        <primaryYaxis>
            <AlternateGridBand Even-Fill="#A7A9AB" Even-Opacity="0.1" />
        </primaryYaxis>
        <Size Width="950px" Height="460px"></Size>
    </ej:PivotChart>

    Grid band customization for ASP NET 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 you change the series type by using the Type property.

  • html
  • <ej:PivotChart ID="MyPivotChart1" runat="server" Url="/RelationalChartService.svc" ClientIDMode="Static">
        <%--Enabling animation in series--%>
        <CommonSeriesOptions EnableAnimation="True" />
        <Size Width="950px" Height="460px"></Size>
    </ej:PivotChart>