ECharts generated label overlaps with dataZoom

Question

Using ECharts I am giving it a data series that consists of a number of data against really values. (e.g plotting stock prices).

I also have data zoom enabled.

My issue is that the generated X axis' labels overlap with the dataZoom. I can't understand from the documentation how to fix this.

Answer 1

You need to set the value of grid.bottom. This will move the whole grid further from the bottom of the canvas and pull the whole X Axis with it.

Example: grid: { bottom: 60 }

// usage
this._displayedChart.setOption({ grid: { bottom: 10 } })

Not a great solution but works.

https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.bottom