Category / Section
How to fit charts within the panels of Dashboard Layout
1 min read
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 dimension. To fit any component inside the dashboard panel’s content area, you have to set height and width of the content element and its parent element as 100%. It 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
