Dimensions

Set size in percentage

You can customize the PivotChart dimension by setting the width and height of the control in percentage.

  • cshtml
  • //Set size to Chart container
    @Html.EJ().Pivot().PivotChart("PivotChart1").Url(Url.Content("/RelationalChartService.svc")).Size(size => size.Height("80%").Width("80%"))
    
        <style>
            #PivotChart1 {
                width:100%;
                height:450px;
            }
        </style>

    Set size in pixels

    You can customize the PivotChart dimension by setting the width and height of the control in pixels.

  • cshtml
  • //Set size to Chart container
    @Html.EJ().Pivot().PivotChart("PivotChart1").Url(Url.Content("/RelationalChartService.svc")).Size(size => size.Height("460px").Width("950px"))
    
        <style>
            #PivotChart1 {
                width:950px;
                height:460px;
            }
        </style>

    Responsive

    PivotChart control supports responsive rendering based on the target device (desktop & tablet) resolution. It supports resolution upto 1024x600. You can enable responsiveness in PivotChart by setting IsResponsive property to true.

  • cshtml
  • //Enable responsiveness to change the Chart size dynamically.
    @Html.EJ().Pivot().PivotChart("PivotChart1").Url(Url.Content("/RelationalChartService.svc")).Size(size => size.Height("460px").Width("950px")).IsResponsive(true)
    
        <style>
            #PivotChart1 {
                min-height: 275px; 
                min-width: 525px; 
                height: 460px; 
                width: 100%;
            }
        </style>

    Normal View

    ResponsiveView