apache / apache/echarts

[Feature] Auto resize (responsive)

Open
#17,428 9 comments 10 reactions 0 assignees View on GitHub
en new-feature pending
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.