Chart height is not setting properly
3 Replies
Hi Nikita,
We have checked your reported issue with DashboardLayout component. When set the height and width as 100 percent for panel content, it adapt the corresponding content within the panel.
Based on your shared code, we see that you are using inline rendering of DashboardLayout component.
We can render DashboardLayout component in two ways.
- Inline rendering of DashboardLayout component. (You can render the Dashboard Layout component by adding the panels property as the attribute to the HTML element )
- Render the DashboardLayout using panel property.
Note: If you are using inline rendering, it is mandatory to refresh the inner components (like chart) during created() event for dashboard layout. Or else you have use panels property to define the panels and its inner components. In that case, there is no need for calling the refresh() method.
For your reference, we have rendered a chart component and adapt the component within the panel.
Refer the below code snippet.
|
<DashboardLayoutComponent id="default_dashboard" created={this.created.bind(this)} columns={5} ref={(scope) => { this.dashboardObj = scope; }} cellSpacing={this.cellSpacing}>
<div id="one" className="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
<div className="e-panel-content">
<ChartComponent ref={(scope) => { this.chartObj = scope; }} height="100%" width="100%" id="charts" primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Tooltip, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='month' yName='sales' name='Sales'/>
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
</DashboardLayoutComponent>
created() {
// Refresh the chart component.
this.chartObj.refresh();
}
<style>
.e-chart {
height:100%;
width:100%;
}
</style>
|
Refer the sample link for Inline rendering.
Refer the sample link for render the DashboardLayout component using property.
Query3- particular card gets out of the place at the bottom.
We suspect that you may have not properly defined the row and column property of the DashboardLayout component. So, your reported issue occurs.
Refer the your issue replicated sample.
When you set the Column property as a 5, and then set the first panel property as below.
|
<div id="one" className="e-panel" data-row="0" data-col="0" data-sizeX="5" data-sizeY="2">
<div className="e-panel-container">
<div className="text-align">0</div>
</div>
</div> |
It align the panel in first row and first column of DashboardLayout component. And then assign the next panel settings as ( row as 1 and col as 0 ). DashboardLayout tries to position the panel on first row. But the first panel is already occupied that position. So, it floats the first panel downwards and position the second panel in that position.
Refer the below screenshot.
Refer the below sample link.
So, you need position the panels in the correct positions. When you set the second panel value as (row as 2 , col as 0). It occupies the position below the first panel.
Refer the below screenshot.
Refer the sample link which may help you resolve your reported problem.
Query 4 Please also suggest me to how to define minimum & maximum height of dashboard layout cards in data-minsizey and data-maxsizey
When resizing the DashboardPanel, you can’t able to minimize and maximize the panel after the declared minsizey and maxsizey value. And also, when you resize the panel, content of the panel will not adapt to the DashboardLayout panel. Because, we have not handled the content resize in our component side. Since, content within the panels will vary based on the different user’s need and it might be any HTML elements regardless of Syncfusion controls, we cannot determine the content inside the dashboard panels and their respective configurations. So, we have no in-built functionality in Dashboard Layout to handle the content inside the panels.
So, when resizing you need to manually refresh the content control or elements to adapt within the DashboardLayout panel.
Refer the below code snippet.
|
<DashboardLayoutComponent id="default_dashboard" created={this.created.bind(this)} columns={5} allowResizing={true} ref={(scope) => { this.dashboardObj = scope; }}
resizeStop ={this.resizeStop.bind(this)} cellSpacing={this.cellSpacing}>
<div id="one" className="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
<div className="e-panel-content">
<ChartComponent ref={(scope) => { this.chartObj = scope; }} height="100%" width="100%" id="charts" primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Tooltip, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='month' yName='sales' name='Sales'/>
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
</DashboardLayoutComponent>
resizeStop(){
// Refresh the chart component.
this.chartObj.refresh();
}
|
Refer the sample link below.
Refer the below links to know more about the DashboardLayout component.
Please let us know, if you need any further assistance.
Regards,
Durga G
SIGN IN To post a reply.
