Dimensions
28 Jun 20172 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