Dimensions

13 Feb 20195 minutes to read

Set size in percentage

You can customize the pivot chart dimension under the size property by setting the width and height of the widget in percentage.

  • JAVASCRIPT
    • <body>
    <div id="PivotChart1" style="width: 100%; height: 450px" ></div>
    <script type="text/javascript">
                //Datasource
                ....
                ....
        $(function () {
            $("#PivotChart1").ejPivotChart({
                ....
                ....
                //Setting size to Chart container
                size: {
                    height: "80%",
                    width: "80%"
               }
            });
        });
    </script>
</body>

    Set size in pixels

    You can customize the pivot chart dimension under the size property by setting the width and height of the widget in pixels.

  • JAVASCRIPT
    • <body>
    <div id="PivotChart1" style="width: 950px; height: 460px" ></div>
    <script type="text/javascript">
                //Datasource
                ....
                ....
        $(function () {
            $("#PivotChart1").ejPivotChart({
                ....
                ....
                //Setting size to Chart container
                size: {
                    height: "460px",
                    width: "950px"
               }
            });
        });
    </script>
</body>

    JavaScript pivot chart control with specified size

    Responsive

    The pivot chart widget supports responsive rendering based on the target device (desktop and tablet) resolution. It supports resolution upto 1024x600. You can enable the responsiveness in the pivot chart by setting the isResponsive property to true.

  • JAVASCRIPT
    • <body>
    <div id="PivotChart1" style="min-width: 950px; min-height: 460px;width: 100%" ></div>
    <script type="text/javascript">
                //Datasource
                ....
                ....
        $(function () {
            $("#PivotChart1").ejPivotChart({
                ....
                ....
                //Enable responsiveness to change the Chart size dynamically.
                isResponsive: true,
                size: {
                    height: "460px",
                    width: "950px"
               }
            });
        });
    </script>
</body>

    JavaScript pivot chart with normal layout

    Normal View

    JavaScript pivot chart with responsive layout

    ResponsiveView