Devextreme-reactive: Allow "percentage" or "auto" values for "width" and "height" properties

[nvwebd]

I'm using ...

• [ ] React Grid
• [x] React Chart
• [ ] React Scheduler

Description

I'm not sure if this could be taken as a request or a simple idea or maybe an enhancement, but I was trying to implement a chart into a wrapper Card with material-ui and I've noticed that there isn't a possibility to set the Chart height as % ( percentage ) or as "auto".

Maybe it would be great to have this implemented?

Thanks for any consideration.

[DmitryBogomolov]

Hello, @nvwebd.

Thank you for your suggestion. We will consider it for future releases.

[nvwebd]

@DmitryBogomolov thanks for the reply!

Swell work I must say!

[mviens]

Thank you for your suggestion. We will consider it for future releases.

@DmitryBogomolov ,

I hope you can do more than consider it. It is an absolute requirement for the project I am working on. We are not building websites, but instead using React to create customized software that our customers can resize _our_ components. Therefore, we do not know the dimensions of the overall component, so using hard-coded values is not possible.

BTW, we need this for the Grid columns when using <TableColumnResizing />.

[Krijovnick]

Hi @mviens ,

The feature with the percentage height for a chart is in our plans.
Percentage widths for Grid columns in development.

[kamil-lon]

how it's going on?

[Krijovnick]

Hi,
We can add the possibility to set auto height to the Chart. But there will be a limitation - the Chart must have the parent with the height in pixels. Does this suit you?

[kamil-lon]

Hi,
We can add the possibility to set auto height to the Chart. But there will be a limitation - the Chart must have the parent with the height in pixels. Does this suit you?

Not really. It would be almost the same case as now is. Look, actually when I go to html inspector and set manually height to 100% chart has good height for me and I'm happy. I can do it also by writing css with '!important' statement. But it's sad to do it.

[Krijovnick]

@kamil-lon Could you clarify what problem do you want to solve? Why you do not like to specify the height in pixels?

[kamil-lon]

@kamil-lon Could you clarify what problem do you want to solve? Why you do not like to specify the height in pixels?

When I have 1920x1200 display I would like to have chart in some size, let's say 500x300, but when someone has 1366x768 display he want to have proportionally smaller chart, not in size of half of view. You know, I just want to scale chart vertically like it works in horizontal way. I don't need to specify the width of chart, so why must I specify the height?

[Krijovnick]

@kamil-lon
I suggest you use a workaround for this case. You can manually get the window size and pass it to the Chart. Please refer to the example illustrating how to do this.

[kamil-lon]

@kamil-lon
I suggest you use a workaround for this case. You can manually get the window size and pass it to the Chart. Please refer to the example illustrating how to do this.

So tell me what if I have my window like grid (I hope you know CSS) : auto 1fr auto, when chart is between other elements with dynamic height. In this case I want to chart fill whole free space between these elements. So I can't calculate this height manually and then best for me would be set height to 100%.

[Krijovnick]

@kamil-lon
I suggest you create a container with the 100% height and it will fill the whole free space. Then, you can create a Chart in it and obtain the size of the container using document.getElementById('containerId').clientHeight. After that, pass it to the Chart height property.