search

f5 / unovis

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript
https://unovis.dev
Apache License 2.0
2.27k stars 44 forks source link

XY Container --> Chart sizing #437

Closed davestewart closed 2 months ago

davestewart commented 2 months ago

Hello,

We're looking to render pixel-perfect bar charts, and our intention was to do some calculations for bar width so that we get perfectly sized and gapped charts.

However, it seems that the existence of Axis components affect the size of the actual bar chart itself.

Is there any way to configure container / chart elements so we can guarantee the size of the inner chart element?

<----------- outer --------->
+---------------------------+
|  +--+  +---------------+  |
|  |  |  |               |  |
|  |  |  |               |  |
|  |  |  | <-- inner --> |  |
|  |  |  |               |  |
|  |  |  |               |  |
|  +--+  +---------------+  |
+---------------------------+
rokotyan commented 2 months ago

@davestewart You can set the autoMargin property of XYContainer to false and specify margin manually. This way the axes won't affect the plot area dimensions.

davestewart commented 2 months ago

Aha! Thanks. Not sure how I missed that in the docs, as I spend a lot of time looking in them!

davestewart commented 2 months ago

What would be great, by the way, would be the inverse way to do it; specify the inner chart width / height and the container expands / contracts to fit. Otherwise it's quite hard to predict how wide the axis should be, depending on the values, formatting, etc.

Tips welcome.