Category / Section
How to fit charts within the panels of Dashboard Layout
2 mins read
This article explains how to fit charts within the panels of the Dashboard Layout.
Problem description
The dashboard panel’s content element exceeds the panel dimension and does not fit into them as expected.
Solution
By default, the dashboard layout is rendered based on the parent element's dimensions. To fit any component inside the dashboard panel’s content area, you have to set the height and width of the content element and its parent element to 100%. This will render the component correctly within the panel content.
Refer to the following code snippet.
<ejs-dashboardlayout id="api_dashboard" #api_dashboard columns="6" [allowResizing]="true" [cellSpacing]='cellSpacing'>
<e-panels>
<e-panel [sizeX]="3" [sizeY]="2" [row]="0" [col]="0">
<ng-template #header>
<div>Product usage ratio</div>
</ng-template>
<ng-template #content>
<div id="column">
<ejs-chart id="columnChart" height="100%" width="100%" [primaryXAxis]='primaryXAxis'>
<e-series-collection>
<e-series [dataSource]="chartData" type='Column' xName='month' yName='sales'>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</ng-template>
</e-panel>
</e-panels>
</ejs-dashboardlayout>
<style>
#columnChart,
#column {
height: 100%;
width: 100%;
}
</style>
Check out the following live sample with above solution: https://stackblitz.com/edit/angular-6cr7dk?file=app.component.ts
