DEV Community

Using Apache ECharts with React and TypeScript

Maneet Goyal on July 03, 2021

What is Apache ECharts? It's a cool data-visualization library like Highcharts, Chart.js, amCharts, Vega-Lite, and numerous others. A lo...

Read full post

raymolla7 • Nov 23 '21 • Edited

This is great, thank you for writing this.

I am wondering how do you get tree shaking working with the above? (Minimal Option Type in TypeScript)

I found this documentation here: echarts.apache.org/en/tutorial.htm...

but I am having trouble incorporating it into your React-ECharts.tsx

Maneet Goyal • Nov 27 '21 • Edited

Didn't try it yet @raymolla7 . But thanks for pointing out that link. Seems like tree shaking can be useful in our case too.

raymolla7 • Nov 28 '21

Ok let me know if you can figure out a way to incorporate it. I tried for a bit but I had no luck :(

The bundle size of ECharts is quite large and can be drastically reduced if we use the "Minimal Option Type in TypeScript" listed in the bottom of the link

Maneet Goyal • Jan 17 '22

@raymolla7 If you were still looking for some info, I hope this helps: dev.to/maneetgoyal/using-apache-ec...

raymolla7 • Jan 19 '22

this is incredibly helpful! Thank you so much for this well written article Maneet!

Vibhor Sharma • Oct 24 '23

This is great article, thanks.

I was wondering if you could also add the onclick and other events functionality in this component as well which is given in this example: echarts.apache.org/examples/en/edi....

I want to make use of this onclick even when I click on any of the bar elements in the bar graph or any other graph.

Maneet Goyal • Oct 27 '23

You should be able to add any click events on the chart too:

const chart = getInstanceByDom(chartRef.current);
chart.on("click", ...);

All the methods and properties mentioned here should be accessible via this approach.

Huy • Sep 25 '21

Nice work! Underrated article. Perhaps it would be easier to follow if you incorporate the example dataset in the comment into the main article :-)

Maneet Goyal • Sep 25 '21 • Edited

Thanks Huy. Have made some updates. Hope it hasn't become too complicated now. The source code changed multiple times in our private repo since the article was first written, so updated the source here too.

Huy • Sep 26 '21

+1 unicorn for the edit! This has been immensely helpful in my learning of echarts. The above article was much more comprehensive and easy to follow now.

David Cantu • Oct 6 '22 • Edited

Hi there. First of all great article! I'm having some trouble myself with the width of the charts not setting correctly on first load. After I adjust the browser width, it is adjusted correctly. Is anyone else having trouble with this?

David Cantu • Oct 6 '22

I also noticed that the chart.resize() returns undefined every time the resize event listener is triggered

edusidsan • Sep 1 '21

How do you call this component in app? I´m having problmes in type declaration.

Maneet Goyal • Sep 6 '21 • Edited

Have updated the component code in the first snippet since the article was first published. Please take a look.

Here's how I am using it inside an app:

<Grid item>
  <ReactECharts option={{.......whatever options object we want to add........}} />
</Grid>

An valid option prop can be:

 {
    dataset: {
      source: [
        ["Commodity", "Owned", "Financed"],
        ["Commodity 1", 4, 1],
        ["Commodity 2", 2, 4],
        ["Commodity 3", 3, 6],
        ["Commodity 4", 5, 3],
      ],
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["Owned", "Financed"],
    },
    grid: {
      left: "10%",
      right: "0%",
      top: "20%",
      bottom: "20%",
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
    },
    series: [
      {
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
      },
      {
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
      },
    ],
  }