This content originally appeared on DEV Community and was authored by Shubham Sapkal
If you’ve ever used Apache ECharts with React, you know it’s a beast. You throw data at it, and it happily plots gorgeous charts.
But one day, I threw too much data at it. Like, “boss wants all plants, all vendors, all months” kind of data.
Instead of scrolling nicely, my chart shrunk itself to oblivion.
Labels? Gone.
Bars? Toothpick-sized.
Me? Crying in console.log.
The Problem
By default, ECharts tries to fit all your data into the chart’s visible width.
That means if you have 200+ bars, instead of scroll, you get… something that looks like a barcode scanner output. 🛒🔍
The Fix (Expandable Outer Div Trick) 🪄
Instead of fighting with ECharts configs, I thought:
“What if I just resize the chart width dynamically and let the parent div scroll?”
That’s exactly what I did. And it works beautifully. 🎉
Here’s my actual React component (with Flowbite styling too):
import EChartsReact from "echarts-for-react";
import { Card } from "flowbite-react";
import { useEffect, useRef, useState } from "react";
import { graphSeries } from 'src/lib/constant'
export const ScrollableChart = ({ chartData }) => {
const [barchartWidth, setBarChartWidth] = useState(window.innerWidth);
const [option, setOption] = useState({
...graphSeries,
});
const containerRef = useRef(null);
const resizeWidth = (dataLength: any, barCount: any) => {
const windowWidth = containerRef?.current?.offsetWidth ?? window.innerWidth;
const paddingNMargin = window.innerWidth > 1660 ? 200 : 100;
const barchartWidth =
(barCount * (windowWidth > 2550 ? 40 : 40) + 60) * dataLength +
paddingNMargin;
setBarChartWidth(
Math.max(barchartWidth + paddingNMargin + 100, windowWidth - 70)
);
};
useEffect(() => {
resizeWidth(chartData?.length, 1);
setOption({
...option,
xAxis: {
...option.xAxis,
data: chartData?.map((item) => item?.name),
},
series: {
data: chartData?.map((item) => item?.value),
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
});
}, [chartData]);
return (
<Card ref={containerRef} className="h-full w-full px-12">
<h1>Scrollable Chart</h1>
<div className="h-full w-full p-4 overflow-scroll">
<EChartsReact
option={option}
style={{ height: "100%", width: `${barchartWidth}px` }}
/>
</div>
</Card>
);
};
What’s Happening Here?
- I calculate
barchartWidthdynamically based on data length. - I give my chart a huge width (
style={{ width: barchartWidth }}), so bars don’t shrink. - I wrap it inside a
divwithoverflow-scroll. - Boom 💥 → Chart scrolls horizontally without losing readability.
Demo 🚀
🔗 GitHub Repo: https://github.com/shubham-sapkal/react-echarts-scroll-fix
🔗 Live Demo:
Why I Like This Approach
- ✅ No fiddling with
dataZoom(though that works too). - ✅ Keeps chart looking natural.
- ✅ Super fast fix when your boss says: “This chart looks broken on big data.”
- ✅ Works for bar, line, and even custom charts.
Final Thoughts
Sometimes the best solutions are not hidden in the library docs. Sometimes, you just need to… make the container bigger and let it scroll.
So next time your ECharts goes full “barcode mode”, don’t panic.
Expand the outer div, enable scroll, and walk away like a hero. 🦸
✨ If this helped (or made you chuckle), clap a few times 👏 and share it with your teammates. May your charts stay scrollable and your bosses stay happy.
This content originally appeared on DEV Community and was authored by Shubham Sapkal
Shubham Sapkal | Sciencx (2025-09-22T15:03:31+00:00) When ECharts Refused to Scroll: My Hacky but Beautiful Fix. Retrieved from https://www.scien.cx/2025/09/22/when-echarts-refused-to-scroll-my-hacky-but-beautiful-fix/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.