search

graphieros / vue-data-ui

An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling
https://vue-data-ui.graphieros.com/
MIT License
1.01k stars 42 forks source link

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

Closed JunShi-He closed 5 months ago

JunShi-He commented 5 months ago

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 commented 5 months ago

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