[Feature Request] Implement Adaptive Width Based on Data for Charts Body:

[JunShi-He]

Hi there,

I hope this message finds you well. I've been using vue-data-ui and have found it to be incredibly useful for my projects. However, I've encountered a limitation that I believe could be significantly improved with the addition of a new feature.

Feature Request:
The ability to have charts automatically adjust their width based on the data they represent. This would be particularly useful for responsive designs where the container's width might change depending on the screen size or layout.

Current Behavior:
Currently, the charts have a fixed width and do not adapt based on the data or container size. This can lead to issues where the chart is either too wide for the container or not fully utilizing the available space.

Proposed Solution:
A new configuration option could be introduced, such as adaptiveWidth: true, which would allow the chart to calculate its width based on the data points and the container's dimensions.

Use Case Scenario:
In responsive web design, it would be beneficial for the chart to be able to fluidly adjust to different screen sizes, ensuring that the visualization is always clear and accessible to users. For example, on a smaller screen, the chart could condense the data points to fit the screen width, while on a larger screen, it could expand to show more detail.

I believe that this feature would greatly enhance the usability and flexibility of your chart library, making it even more versatile for a wider range of applications.

I'd be happy to contribute or help in any way I can to implement this feature. If there are any considerations or discussions around this idea, please let me know.

Thank you for considering my request and for maintaining such a great library.

Best regards, juns

[graphieros]

Hi @JunShi-He !

Thanks for your proposition, it looks interesting.

Currently it is required to set a width on the container which includes vue-data-ui components. Basically svg charts take 100% width of the parent, and scale according to the parent width.

I'd be happy to check out what you are thinking about, if you want to fork the repo and maybe try your idea on a given component.

Cheers

[lanwu114]

宽度是可以的，请问什么时候高度也能自适应呢？

[graphieros]

A workaround for now

[graphieros]

You can upgrade to v2.2.52 with built-in responsive feature for the following components:

• VueUiXy
• VueUiQuickChart
• VueUiDonut
• VueUiNestedDonuts
• VueUiOnion

What you need to do:

1. Place your chart inside a resizable parent container or inside a parent container with fixed dimensions.
2. Set config.responsive to true:

const config = ref({
  responsive: true,
  //...  rest of your config
})

We are planning to roll out this feature to more charts. Check out the current state of this roll out here.