Ngx-charts: [Feature] Independent height/width and %

[kyleledbetter]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Discussed in Gitter:

Current behavior
Currently you can only set height/width together in view

Requested behavior
It would be nice to have height and width as separate values, and if you leave off width it fills the parent like it does now.

It would also be nice if percentage % values were accepted.

[marjan-georgiev]

Let's replace the view input with width and height inputs.

These properties would accept either a numeric value, a percentage, or left undefined:

• Numeric value: [width]="500" - chart is 500 px wide
• Percentage value: [width]="50%" - chart is 50% the width of its parent element
• not specified, or undefined - chart fits to the parent element. This is equivalent to [width]="100%"

[Hypercubed]

Kind of along these lines.... the demos should perhaps specify the input units (or valid units). For example in the demo:

Height: -> Height: [px]
Inner radius: -> Inner radius: [%]

[fernandocode]

I have a request that may be similar or complementary to this (maybe it should be another request).

I'm evaluating the use of this library of charts in my project and intend to use them inside ionic cards. So I realized that the graphics do not have an automatic scale, if I do not specific a view (height and width), it only grows height if the parent element has a specified size. Example:

What I wanted was for the graph to have the maximum width size of the parent element, and scale proportionally according to its width.

Other graph libraries (chart.js with primeng) already display this behavior, for automatic sizes.

[marjan-georgiev]

@fernandocode I'm not sure I understood that right, but this is the behavior of ngx-charts

1. If view input is set, the width and height are whatever the view input specifies
2. If view input is not set, then
   2.1 If the immediate parent container of the chart has a height, the width and height of the chart are set to fit the width and height of the parent container
   2.2 If the parent container does not have a height, then the chart gets a default dimensions of 600x400px

From the example you posted, it seems that chart.js has a fixed width/height ratio which is preserved whenever the width changes (making the height to change along with it). This is not a desired behavior in ngx-charts because it would limit the chart to a single width/height ratio. We want to be able to resize one dimension while not touching the other one.

If you want your chart to be taller, try increasing the height of the parent container.

[Deilan]

@marjan-georgiev height and width should be definitely honored independently in item 2.1.

[jotatoledo]

any updates on this?

[dthulin]

Yes, updates please? Whether or not I use ngx-charts on my website depends entirely upon the status of this issue, as I cannot get auto-sizing to function when wrapped in a div with set with height or width % values instead of px values.

[powbtr]

Any news here?

[Hypercubed]

Please reopen if this is still an issue.

[developcodeza-matthew]

Would also love to see this feature implemented

[Deilan]

@Hypercubed no one outside can reopen it. :)

[augustotmw]

@fernandocode I'm not sure I understood that right, but this is the behavior of ngx-charts

1. If view input is set, the width and height are whatever the view input specifies
2. If view input is _not_ set, then
   2.1 If the immediate parent container of the chart has a height, the width and height of the chart are set to fit the width and height of the parent container
   2.2 If the parent container does not have a height, then the chart gets a default dimensions of 600x400px

From the example you posted, it seems that chart.js has a fixed width/height ratio which is preserved whenever the width changes (making the height to change along with it). This is not a desired behavior in ngx-charts because it would limit the chart to a single width/height ratio. We want to be able to resize one dimension while not touching the other one.

If you want your chart to be taller, try increasing the height of the parent container.

hi, @marjan-georgiev, how are you bro?

so, how about add preserveAspectRatio="xMidYMid meet" implementation and remove width and height from svg and set the svg property viewbox="0 0 <parent-width> <parent-height>" to fit the parent sizes when the "view" property isnt set?

and so, let the css works with the positions.

it would solve all resize/responsive issues above. :)

[kavyahalani]

Let's replace the view input with width and height inputs.

These properties would accept either a numeric value, a percentage, or left undefined:

• Numeric value: [width]="500" - chart is 500 px wide
• Percentage value: [width]="50%" - chart is 50% the width of its parent element
• not specified, or undefined - chart fits to the parent element. This is equivalent to [width]="100%"

How to use this can you please give example? i.e right now view=[800, 400], I want to specify width 100%

[SandeepBalachandran]

Let's replace the view input with width and height inputs.

These properties would accept either a numeric value, a percentage, or left undefined:

• Numeric value: [width]="500" - chart is 500 px wide
• Percentage value: [width]="50%" - chart is 50% the width of its parent element
• not specified, or undefined - chart fits to the parent element. This is equivalent to [width]="100%"

This is not yet implemented. I am trying to get the graph fit to its parent component and be responsive on screen resize. Let me know if there is a fix. Thanks

[aaronscribner]

This still does not work properly. You need to reopen this and address the concerns of the community if you would like for your library to be adopted.

[k1laba]

I could make it work this way:

:host {
  width: 100%;
  .container {
    height: 400px;
  }
}

html structure: .container > ngx-charts-bar-vertical

[daniel-seitz]

@Hypercubed this issue is not really being decided upon and not really being closed properly, isn't it?

I don't like the need to give a width and height and rather prefer it being responsive, always.

Everybody could write a wrapper to fit their specific needs. We create responsive containers, or our containers are in responsive containers, then the current implementation falls apart since you would need JS in runtime to figure out what the direct container's width and height are. Feels like a dirty workaround.

Use 100% width and maintain the aspectRatio and let us/css figure out how big the charts are really going to be.
Additionally if we specify different width/height of course the aspectRatio should be ignored.

Not sure if svg allows this but it sure would feel very intuitive.