1. Home
  2. Forum
  3. React - EJ 2
  4. Height prop is being ignored?

Height prop is being ignored?

Hi,

I am having some trouble with sizing the chart comnponent inside of a card.

I'm experimenting with a DashboardComponent with panels consisting of cards containing a Chart.

The width seemed fine, but the height wasn't coming out correctly so I set the ChartComponent width to 50% and the height to 50%. The width look correct. It is filling half the card, but the height is incorrect.

Is it possible the ChartComponent is ignoring the height prop?

Thanks,
Eric


Attachment: Syncfusion_cfc10910.zip

18 Replies 1 reply marked as answer
EF Eric Forgy October 25, 2020 03:23 AM UTC

To clarify, I understand the size of the panel is determined by the DashboardComponent, but I am referring to the sizing of a chart inside a card inside a panel.

The card seems to fill up 100% of width and 100% of the height of the panel as desired, but when I set the width of the chart inside the card to 50%, it looks correct, but when I set the height to 50%, it seems to be ignored. In other words, the chart is filling up 50% of the width of the panel as desired, but it is not filling 50% of the height. It seems as if the height prop is being ignored.

EF Eric Forgy October 25, 2020 06:34 AM UTC

Here is a sample code to illustrate.

The `TestDiv` does what I expect. The inner div covers 50% of the panel width and 50% of the panel height.

The `TestChart` doesn't do what I expect. The chart covers 50% of the panel width, but more than 50% of the panel height. I need the panel height to also be 50% as specified by the width and height props of the `ChartComponent`.



import React from "react";
import { inject, observer } from "mobx-react";
import { DashboardLayoutComponent, PanelsDirective, PanelDirective } from '@syncfusion/ej2-react-layouts';
import {
    AxisModel,
    ChartComponent,
    ColumnSeries,
    Inject,
    Legend,
    SeriesCollectionDirective,
    SeriesDirective,
    Tooltip,
    TooltipSettingsModel } from "@syncfusion/ej2-react-charts";

const TestDiv = () => {

    return (
        <div style={{height: "100%", width: "100%"}}>
            <div style={{height: "50%", width: "50%", backgroundColor: "blue"}} />
        div>
    )
}

const TestChart = (props: any) => {

    const { name, id } = props;

    const primaryxAxis: AxisModel = { valueType: "Double" },
        primaryyAxis: AxisModel = { labelFormat: "P", minimum: 0, maximum: 1 },
        legendSettings: AxisModel = { visible: true },
        tooltip: TooltipSettingsModel = { enable: true, shared: false };

    const data = [
        {t: 0, Y: 1},
        {t: 1, Y: 3},
        {t: 2, Y: 2},
        {t: 3, Y: 4},
    ]

    return (
        <div className = "e-card" style={{ width: "100%", height: "100%" }}>
            <div className = "e-card-content">
                <ChartComponent
                    id={name}
                    primaryXAxis={primaryxAxis}
                    primaryYAxis={primaryyAxis}
                    title={id}
                    description={id}
                    legendSettings={legendSettings}
                    tooltip={tooltip}
                    width="50%"
                    height="50%"
                >
                    <Inject services={[ColumnSeries, Tooltip, Legend]}/>
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={data} xName="t" yName="Y" name="Mortality Rate" type="Column" /*marker={marker} */ />
                        <SeriesDirective dataSource={data} xName="t" yName="Y" name="Survivors" type="Column" /* marker={marker} */ />
                    SeriesCollectionDirective>
                ChartComponent>
            div>
        div>        
    )
}

const TestDashboard = () => {

    const cellSpacing = [10, 10];

    return (
        <div>
            <DashboardLayoutComponent id="dashboard_default" columns={6} cellSpacing={cellSpacing} allowResizing={false}>
                <PanelsDirective>
                    <PanelDirective sizeX={4} sizeY={1} row={0} col={0} content={() => <TestDiv />} />
                    <PanelDirective sizeX={2} sizeY={1} row={0} col={5} content={() => <TestDiv />} />
                    <PanelDirective sizeX={2} sizeY={1} row={1} col={0} content={() => <TestDiv />} />
                    <PanelDirective sizeX={4} sizeY={1} row={1} col={3} content={() => <TestDiv />} />
                    <PanelDirective sizeX={4} sizeY={1} row={0} col={0} content={() => <TestChart name="Chart1" id="1" />} />
                    <PanelDirective sizeX={2} sizeY={1} row={0} col={5} content={() => <TestChart name="Chart2" id="2" />} />
                    <PanelDirective sizeX={2} sizeY={1} row={1} col={0} content={() => <TestChart name="Chart3" id="3" />} />
                    <PanelDirective sizeX={4} sizeY={1} row={1} col={3} content={() => <TestChart name="Chart4" id="4" />} />
                PanelsDirective>
            DashboardLayoutComponent>
        div>
    )
};

export default TestDashboard;

EF Eric Forgy October 25, 2020 04:54 PM UTC

<ChartComponent
    id={name}
    primaryXAxis={primaryxAxis}
    primaryYAxis={primaryyAxis}
    title={id}
    description={id}
    legendSettings={legendSettings}
    tooltip={tooltip}
    width="50%"
    height="50%" // This is what appears to be ignored
>

EF Eric Forgy October 25, 2020 05:14 PM UTC

"@syncfusion/ej2-react-charts": "^18.3.42"

I don't know if this is the issue, but looking through the code, I notice an asymmetry between `width` and `height` in

@syncfusion\ej2-charts\src\chart\chart.js

It looks like `Chart.prototype.onPropertyChanged` has the following:

                    case 'height':
                    case 'width':
                        this.createChartSvg();
                        refreshBounds = true;
                        break;

It looks like nothing happens with `height`. Should that maybe be:

                    case 'height':
                        this.createChartSvg();
                        refreshBounds = true;
                        break;
                    case 'width':
                        this.createChartSvg();
                        refreshBounds = true;
                        break;

Just guessing :)




EF Eric Forgy October 25, 2020 08:40 PM UTC

I noticed the 18.1.56 release notes say:

         Bug Fixes

  • #279297 - Height in percentage not working properly is fixed now.

I wonder if the same issue is impacting my chart here?

SM Srihari Muthukaruppan Syncfusion Team October 26, 2020 11:13 AM UTC

Hi Eric, 
   
We have analysed your query. From that, we would like to let you know that we are able to reproduce the reported scenario. And we confirm this as a bug and logged a bug task for this. It can be tracked through our feedback portal below. As of now, we can achieve your requirement by setting the height in the style property of the chart in %. Based on your requirement we have also prepared a sample for reference. Please find below the code snippet and sample. 
   
   
Code Snippet:  
   
<ChartComponent 
          style={{ height: "50%", width: "80%" }} 
          // add your additional code here           
         <Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]} /> 
          <SeriesCollectionDirective> 
            // add your additional code here  
          </SeriesCollectionDirective> 
        </ChartComponent> 
// add your additional code here  
       
  
   
Screenshot:  
  
 
 
   
  
   
The fix for this issue will be available in our volume 3 sp1 release which is estimated to be rolled out on or before November 5th, 2020. We appreciate your patience until then  
   
Regards,  
Srihari M 

Marked as answer
EF Eric Forgy October 26, 2020 04:55 PM UTC

Awesome! Thank you for looking into this and thanks for the workaround. I should have thought of that :)

EF Eric Forgy October 26, 2020 05:02 PM UTC

Hmm... setting the height to 50% in the style prop is a good idea, but this is what my charts look like now:



It looks like it is chopping the charts in half 🤔

DG Durga Gopalakrishnan Syncfusion Team October 28, 2020 03:16 AM UTC

Hi Eric, 

Thanks for an update. Since we are unable to reproduce an issue from our end, could you please share the following information which will be more helpful for further analysis and provide you the solution sooner. 
  • Try to reproduce the reported scenario in the below sample.
  • Please share your sample (or) code snippet with full configurations.
  • Share the details if you have done any other customization in your sample.
  • Share your data source file.
  • Share your preview template version.


Kindly revert us, if you have any concerns. 
 
Regards, 
Durga G 


SM Srihari Muthukaruppan Syncfusion Team October 28, 2020 05:42 AM UTC

  
Hi Eric, 
 
We are glad to announce that our v18.3.44  patch release is rolled out, we have added the fix for the height in percentage is not working issue and is available for download under the following link.  
 
 
 
We appreciate your patience in waiting for this release. Let me know, if you need further assistance.  
  
Regards,  
Srihari M 


EF Eric Forgy October 28, 2020 06:44 PM UTC

Thanks! I updated all my @syncfusion stuff to v18.3.44 and now it won't compile at all 😅

Looking at the package.json from the stackblitz link: https://stackblitz.com/edit/react-cshxmp-bipjf4?file=package.json

I don't see anything newer than v18.3.42 there 🤔

EF Eric Forgy October 28, 2020 07:15 PM UTC

I put this together, but now it seems really jumbled up.

https://stackblitz.com/edit/react-cshxmp-3nlvaj?file=index.js

EF Eric Forgy October 28, 2020 07:36 PM UTC

Hi there,

Sorry for the hassle, but I don't think this is fixed in v18.3.44.


It should be sufficient to set the width and height prop on the ChartComponent. I shouldn't need to fiddle with DashboardLayout resizeStop to get this to work.

Also, I only get the desired layout after manually resizing the window. I think this should work without needing to write my own resizeStop.

Any idea how to get my stackblitz sample to work properly?

Thanks

EF Eric Forgy October 28, 2020 07:40 PM UTC

PS: Also, you can see from

that setting the height prop to "50%" for the ChartComponent is still not working.

EF Eric Forgy October 28, 2020 08:58 PM UTC

Btw, setting the height to "50%" is only for testing purposes. What I really want is to be able to set the height of the ChartComponent to "100%" so it completely fills the panel.

I've updated


accordingly. You can see that the chart is overflowing the panel.

SM Srihari Muthukaruppan Syncfusion Team October 29, 2020 12:11 PM UTC

Hi Eric, 
 
We have analysed your query. From that, we would like to let you know that the chart is responsive with respect to the width and height of its parent element, if its zero, then it will render with its default size(600 * 450). Hence we suggest you to remove the card div which is not necessary since the chart is provided inside the dashboard layout div to overcome your reported scenario. Based on your requirement we have also modified the sample for your reference. Please find below code snippet and sample.  
 
 
Screenshot: 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


EF Eric Forgy October 29, 2020 07:05 PM UTC

That did the trick! Thank you so much.

Just out of curiosity, would it make sense to update the component's CSS so we don't need to manually revise the CSS like that or maybe update the docs. I'm not a CSS expert and never would have thought of that 😅 It's ok. I'm happy to have this working now. Thank you! :)

SM Srihari Muthukaruppan Syncfusion Team October 30, 2020 12:12 PM UTC

Hi Eric, 
 
Most welcome. 
 
We have analysed your query. From that, we would like to let you know that its not possible to update the component's CSS since it may affect the working of height and width property in the chart. We are planning to include the scenario in how to section of the documentation. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.    
    
Thanks,    
Srihari 


Loader.
Up arrow icon