When ECharts Refused to Scroll: My Hacky but Beautiful Fix

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 barchartWidth dynamically based on data length.
• I give my chart a huge width (style={{ width: barchartWidth }}), so bars don’t shrink.
• I wrap it inside a div with overflow-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.