Dimensions
28 Jun 2017 / 2 minutes to read
Set size in percentage
You can customize the PivotChart dimension by setting the width and height of the widget in percentage.
<body>
<div ng-controller="PivotChartCtrl">
<div id="PivotChart1" ej-pivotchart e-dataSource="dataSource" e-size="size" style="height: 480px; width: 100%;"/>
</div>
<script>
angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
$scope.dataSource = {
///...
};
$scope.dataSource = $scope.dataSource;
//Setting size to Chart container
$scope.size = { height: "80%", width: "80%" };
});
</script>
</body>
Set size in pixels
You can customize the PivotChart dimension by setting the width and height of the widget in pixels.
<body>
<div ng-controller="PivotChartCtrl">
<div id="PivotChart1" ej-pivotchart e-dataSource="dataSource" e-size="size" style="height: 460px; width: 950px;"/>
</div>
<script>
angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
$scope.dataSource = {
///...
};
$scope.dataSource = $scope.dataSource;
//Setting size to Chart container
$scope.size = { height: "460px", width: "950px" };
});
</script>
</body>
Responsive
PivotChart widget supports responsive rendering based on the target device (desktop & tablet) resolution. It supports resolution upto 1024x600. You can enable responsiveness in PivotChart by setting e-isResponsive
property to true.
<div ng-controller="PivotChartCtrl">
<div id="PivotChart1" ej-pivotchart e-dataSource="dataSource" e-isResponsive ="true" style="height: 460px; width: 100%;"/>
</div>
Normal View
ResponsiveView
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page