[Feature] Auto resize (responsive)
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 15h 17m
- Merged PRs (30d)
- 5
Description
### What problem does this feature solve?
The chart should resize to its own container. Maybe by using [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) (not window.addEventListener('resize'), it's not only about the window. Elements can resize without changing the window. I'm tired of the window resize solution.)
### What does the proposed API look like?
This can be a global option. Enable or disable resize.
### Idea for the implementation?
I see that the canvas is wrapped in a div element.
**source code (editor)**
```html
```
**rendered code (DOM in browser)**
```html
```
**Solution**
A DIY solution is simple. But I why not just support it build in for a responsive chart?
The build-in container is something like `#chart > div`. But won't work for the DIY solution.
Maybe because the div is recreated on some echarts actions? Not sure, maybe we need some more changes here or
we could just use the container element passed `echarts.init( > here <)`.
```js
const container = document.querySelector('#chart');
const chart = echarts.init(container);
const resizeObserver = new ResizeObserver((entries) => {
chart.resize();
})
resizeObserver.observe(container);
```
Did I miss something? Can echarts already do that? I found nothing.
Ok the `ResizeObserver` feature is no the oldest implemented in browsers. But 2 - 4 years old is enough in my opinion. It's ready to use.
Contributor guide
Research direction
Start at the echarts.init entry point and inspect the existing chart.resize behavior and any window-resize handling. Determine how container size changes should be observed and how the proposed global enable/disable option fits the API. Done means charts resize when their container changes without relying only on window resize, with the option respected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100