ReactJS : Simple way to use Echart in React


In this tutorial, we’ll show you how to implement ECharts in a React application to create beautiful, interactive data visualizations. I’ve been experimenting with various JavaScript charting libraries, and ECharts has quickly become one of my favorites. It strikes a great balance between simplicity and flexibility, making it an excellent choice for frontend developers. The library is well-documented, offers plenty of sample configurations, and is relatively easy to set up in a React project. Since ECharts is Canvas-based, styling with CSS is limited—but it still allows a high level of visual customization through its rich configuration options. Everything I’ve needed to do so far has been fully achievable with ECharts.


Let’s Get Started — The Easy Way

Getting started with ECharts in React is simpler than you might think.

React is a free and open-source JavaScript library for building fast, efficient, and dynamic user interfaces or UI components. It’s widely used for creating scalable frontend applications.

On the other hand, ECharts is a powerful, open-source JavaScript charting library developed by Apache. It allows developers to build interactive, highly customizable, and visually appealing charts with ease. Whether you're working on dashboards, reports, or data-driven UIs, ECharts is a fantastic tool to bring your data to life.

First, install ECharts and the React wrapper

npm install echarts echarts-for-react

Build Your First Bar Chart

import React from "react";

import ReactEcharts from "echarts-for-react";


function App() {

  const option = {

    tooltip: {},

    xAxis: {

      type: 'category',

      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

    },

    yAxis: { type: 'value' },

    series: [

      {

        data: [120, 200, 150, 80, 70, 110, 130],

        type: 'bar',

        showBackground: true,

        backgroundStyle: { color: 'rgba(180,180,180,0.2)' },

        label: { show: true, position: 'top' },

      }

    ]

  };


  return <ReactEcharts option={option} style={{ height: '400px' }} />;

}


export default App;


Now, go back to your browser



The full source code for this project can be found here

For more interesting topics and hands-on guides, check out my other blog posts and keep levelling up your frontend skills!

Comments

Post a Comment

Popular posts from this blog

How to Format Numbers with Commas and Decimals in JavaScript

Image
Sometimes, you may need to format a number value with commas and decimals in your HTML pages to make it easier to read. Here I cover how to transform a number into a comma-separated format with decimals using JavaScript. You’ll find both approaches here. 📌 Method 1: Using Intl.NumberFormat The Intl.NumberFormat object formats numbers according to locale. Use the en-US locale (or others like en-IN , de-DE ) to get thousands separators and decimal formatting: function formatNumber(value, decimals = 2, locale = 'en-US') { return new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(value); } // Example usage: console.log(formatNumber(1234567.891)); // "1,234,567.89" console.log(formatNumber(1000)); // "1,000.00" console.log(formatNumber(1.2, 2)); // "1.20" 💡 Key Points Auto-formats thousands with commas and decimals. You can specify any locale (e.g. ...
Read more

React Hooks in Modern Web Development

Image
 React Hooks in Modern Web Development React has been a powerful library for building interactive UIs for a long time. But with React Hooks , developers have seen a whole new way of writing and managing components. Hooks simplify logic, make code more readable and promote reusable patterns, making modern web development more efficient and fun. In this post we’ll look at the effects of React Hooks , diving into the benefits , state management , code readability and performance optimization . The Benefits of React Hooks React Hooks let you use state and other React features without writing a class. Game changer for teams looking to clean up their codebase. Some of the benefits include: Simplified Code : Hooks reduce boilerplate, makes components easier to write and maintain. Logic Reusability : Custom hooks allow you to reuse stateful logic across components. Easier Testing : With smaller function based components, testing becomes more straightforward. Overall Hooks encourage cleane...
Read more