How to Build Customer-Facing Dashboards with ECharts (Apache)

Building customer-facing dashboards that are visually appealing, interactive, and insightful requires powerful, versatile tools. You need in-depth customization, scalability, and performance, as well as the ability to deliver interactive features to your end users. 

Apache ECharts (ECharts) stands out as a powerful solution, offering a wide array of features that make crafting advanced visualizations efficient and effective.

But like most charting libraries, ECharts is a library of front-end components and alone will not deliver a fully-functioning dashboard experience. 

Features like drill-downs or exporting will require extra effort to implement, leaving you to bridge the gap with extensive manual coding for a truly delightful native app experience.

This article will show you how to:

• Get started with ECharts charting library
• Configure your  ECharts components for customer-facing dashboards
• Use tools to bring ECharts to life including implementing exporting and other advanced features

Build dashboards with ECharts (Apache) and Embeddable

Get access

What is ECharts (Apache)?

ECharts, or "Enterprise Charts," is an open-source JavaScript visualization library licensed under the Apache License 2.0. 

Known for its high performance and flexibility, ECharts empowers developers to create a wide array of interactive and visually rich charts. Its main differentiator is its ability to handle complex datasets and render high-quality graphics, all while maintaining smooth interactivity. 

Unlike some other visualization libraries, ECharts has a happy balance  between ease of use and flexibility, which makes it a strong choice for teams looking to deliver great charts, fast.. 

For contrast, D3.js offers unmatched flexibility but requires more effort to implement because its not really a charting library as much as it’s a low-level set of concepts that you can use to build charts.

Chart.js, on the other hand, is beginner-friendly and well-suited for simple visualizations but lacks the advanced customization and interactivity of ECharts. 

Meanwhile, Highcharts has a vast library of advanced charts so it excels in enterprise-grade applications but comes with licensing costs, unlike the free and open-source ECharts. 

Key features of ECharts include:

• Interactivity: Seamless zooming, panning, and tooltips for an enhanced user experience
• Customization: Deep customization, from themes to animations
• Large framework compatibility: Works with React, Angular, Vue.js, Svelte, and vanilla JavaScript
• Rich chart ecosystem: Supports basic and advanced chart types, including 3D visualizations

Should you use ECharts (Apache)?

Whether or not ECharts is the right solution for you depends on several factors, such as your needs in terms of user-friendliness, customizability, and interactive capability. 

• Ease of use: ECharts has a low learning curve, with comprehensive documentation and an intuitive API. However, the wide number of features might feel overwhelming to beginners.

• Support and documentation: ECharts has robust community support, an active GitHub repository, and detailed documentation. While not as large as D3.js or Chart.js communities, it provides enough resources for most troubleshooting and learning concerns.

• Versatility: From simple bar charts to advanced Sankey diagrams, ECharts covers an extensive range of charting needs. It supports frameworks like React, Angular, Vue, and Svelte, making it highly adaptable.

• Performance: Designed for speed, ECharts excels in rendering large datasets without lag, particularly for client-facing dashboards requiring seamless interactivity.

ECharts (Apache): Chart types 

ECharts allows you to create a variety of charts, from simple line, bar, or pie charts, to more complex ones like heatmaps or Sankey diagrams.

• Line charts: ideal for showing trends over time, such as sales growth or temperature changes. ECharts supports smooth curves, multiple series, and customizable tooltips for better insights. Below, you can see a sample line chart built with ECharts.

‍

• Bar charts: Display comparisons between categories, such as revenue by product. ECharts enhances them with stacked, grouped, and horizontal bar chart options.

• Pie charts: Perfect for illustrating proportions within a dataset, such as market share. ECharts offers interactive labeling and donut chart variations for added depth.

• Scatter plots: Help visualize relationships between two variables, such as age vs. income. ECharts supports advanced features like regression lines and density analysis.

• Heatmaps: Highlight intensity or frequency in a dataset, such as website traffic by time and location. ECharts helps visualize large datasets with gradient customizations.

• Treemaps: Depict hierarchical data, such as file storage usage. ECharts allows intuitive zooming and detailed labels to make complex hierarchies comprehensible.

• 3D charts: Offer depth for visualizing multi-dimensional data, such as geological data or financial metrics. In ECharts, you’ll also have 3D bar, scatter, and surface plots with real-time interactivity.

• Radar charts: Great for comparing multiple variables across categories, such as performance metrics. 

• Sankey diagrams: Used for visualizing flows, such as customer journeys or resource allocation.

• Gauge charts: Commonly used for displaying progress or performance metrics, such as system health or completion rates. ECharts supports radial and semi-circle gauges with customizable thresholds.

ECharts (Apache): Frameworks

Apache ECharts is compatible with several frameworks so you can easily integrate charts into your existing projects.

• React: ECharts integrates easily with React applications, helping developers use the library's interactive and customizable charting features while working within React's component-based architecture. 

• Angular: Angular's robust ecosystem pairs well with ECharts, allowing developers to integrate dynamic charts and visualizations into Angular templates. This supports the reactive programming model, making it easy to bind data changes to the charts in real-time.

• Vue: Vue applications benefit from ECharts' flexibility and performance, with developers able to include its visualizations in Vue’s reactive and component-based framework. This makes it simple to create highly interactive dashboards that adapt to user input.

• Svelte: ECharts also works well with Svelte, complementing its focus on minimal boilerplate and efficient reactivity. The combination ensures that you can build interactive and visually appealing charts without compromising on performance or code simplicity.

How to use ECharts (Apache)

Implementing EGCharts (Apache) into your application requires a few simple steps:

1. Install ECharts

This step is simple and requires a single line of code:

npm install echarts

2. Import and initialize

Once you’ve installed ECharts, it’s time to import it and add it to your project. In JavaScript, this will look something like the following lines of code:

import * as echarts from 'echarts';

Then, initialize chart instance by binding it to a DOM element:

const chart = echarts.init(document.getElementById('main'));

3. Set chart options

Define the configuration object, specifying the chart type, dataset, and styling options:

const option = {

    title: { text: 'Sample Chart' },

    xAxis: { data: ['Mon', 'Tue', 'Wed'] },

    yAxis: {},

    series: [{ type: 'bar', data: [120, 200, 150] }]

};

Once you’ve customized everything, don’t forget to render the chart by calling chart.setOption(option).

chart.setOption(option);

Next steps: Lots more to do

You’ve created your chart, but that’s not the end of your project. There are still a lot of steps between you and performant, interactive dashboards that are intuitive and powerful for your end users. For example, you may need to add filters, define interactivity and set up a date service that enables you to populate it with real-time data.

You may also need to add options to export charts, add responsive design, or add new functionalities through plugins. If you’re opting for an in-house build then you need to consider not only the front-end charting component, but also how this chart will render, how the data will be served, what interactions the end user has available to them, how you’ll monitor performance and usage, etc.

The real kicker, though, is that for every change you make to your customer-facing analytics in the future, your developers will need to be involved.

Embeddable can help you with all of the above… 

Save time with headless embedded analytics

While ECharts is one of the best Javascript charting libraries to help you define frontend charting visuals and functionality for your application, it alone does not equal a customer-facing analytics experience.  Creating a chart is only part of the process. Next, you have to turn your charts into a performant, delightful experience for your users to extract and take action on insights.

This is where Embeddable comes in...

Embeddable’s headless embedded analytics toolkit lets you integrate powerful data visualization into your applications, cutting the time and cost of building dashboards while delivering advanced, easy-to-maintain features.

With tools like drill-downs, exporting, and self-service options readily available, Embeddable’s headless embedded analytics solution helps you meet user expectations while enabling your engineers to focus on other key product initiatives. Here are its most important benefits.

1. Save  development time

Embeddable allows you to import your ECharts (or any other charts) into an embedded analytics experience that saves your engineers sprints of time building, managing, optimising and QA’ing. 

It provides a no-code dashboard management tool that enables you to quickly build, modify and add features to your own custom charts, and then deploy them performantly into your application, using a lightweight and secure embedding method. 

It comes with pre-built features, such as exporting and customizable dashboards for your end users, so you don’t have to make a change in code every time a customer asks for a new visualisation.

With Embeddable’s headless embedded analytics tools, you can focus on core application functionality rather than reinventing the wheel and writing code to customize your dashboards. This accelerates project timelines and reduces the costs associated with custom development.

2. Full control over your UI/UX

Other Embedded analytics tools offer very limited customization with fixed layouts. By enabling you to import charts as code, you can use any charting library you like, or even build your own - and because it's just code, there’s really nothing you can’t control. Ultimately, Embeddable allows you to keep full control over the user interface and experience with minimal coding. You can fully tailor what your dashboards will look like to align with the brand identity and application design.

If you can dream it, you can do it - you can adjust every element to provide a seamless, cohesive experience for users. This flexibility ensures that charts and dashboards feel like an integral part of your application, not an afterthought.

3. Scalability and performance

Embeddable’s headless embedded analytics solution is built to scale effortlessly, making it suitable for applications of any size, from startups to enterprise-grade solutions. It ensures consistent performance even as the number of users and complexity of data grows - as well as providing two layers of configurable caching that allow you to get the right balance of data freshness and latency for your application.

Plus, it offers enterprise-grade security features, including secure data access and compliance with industry standards, giving businesses peace of mind while serving analytics to users.

How to use ECharts (Apache) with Embeddable

You’ve developed your ECharts (Apache) charts, but how can you use Embeddable to take advantage of all the benefits headless embedded analytics have? The process is fast and simple. Here’s a quick step-by-step guide.

1. Install ECharts and build your chart

Using the steps described above, install ECharts (Apache), integrate it into your project, and build the charts you want.

2. Push Charts to Embeddable via the SDK

Once you have your charts, you can add them to Embeddable via the SDK. After you’ve pushed them to the no-code builder, they’ll be packaged as reusable charting components. From there, you can use them as many times as you’d like to build beautiful dashboards with just a few clicks.

3. Configure your dashboards

Now you can focus on configuring and customizing your dashboards as needed. For instance, you can set up interactions between charts and control how data appears in real-time. 

You can also add features like exporting, and give your users the power to build their own dashboards and views from within your application.

4. Embed with a web component

Finally, you can add your dashboard to your app using a lightweight, secure web component provided by Embeddable. To do this, follow the steps outlined in the Embeddable docs to create a seamlessly native experience for the end user with charts loading directly in your DOM using just a few lines of code.

ECharts (Apache) reviews

If you read ECharts (Apache) reviews, you’ll see the charting library is generally appreciated by users. Most people like its large variety of chart types, mobile optimization, and powerful declarative API. 

For example, a user on Reddit said simply, “ECharts is hands down the best. Extremely well documented, consistent API, fast etc. Really impressed honestly.”

Another Reddit user disagrees slightly, but still feels ECharts is a still good choice: “The documentation could be improved, but the performance and range of chart types make up for it.”

Of course, users also appreciate that the library is completely free and open-source, though some say support isn’t always the best. Others, who performed more thorough tests, shared that the performance is good, but not for complex projects, where the library still struggles.

Simplify dashboard development with ECharts and Embeddable

ECharts (Apache) is a powerful tool for developers seeking to build customer-facing dashboards. Its combination of flexibility, range of charts, and framework compatibility makes it a top contender in the visualization space. But this is only the frontend.

By pairing ECharts with Embeddable, you can deliver feature-rich dashboards with minimal effort, saving time and resources.

Whether you’re a startup looking to accelerate development or an enterprise enhancing its analytics capabilities, this combination offers a compelling solution that saves engineering time, while ensuring performance and scalability

Build dashboards with ECharts (Apache) and Embeddable

Get access

Frequently asked questions about ECharts (Apache)

What chart types are available in ECharts?

ECharts supports a wide variety of chart types, including bar charts, pie charts, scatter plots, heatmaps, treemaps, 3D charts, radar charts, Sankey diagrams, and more.

How much does ECharts cost?

ECharts is entirely free and open-source, licensed under the Apache License 2.0. It’s one of the most comprehensive open source charting libraries available.

Can ECharts be customized to match my application's design?

ECharts is highly customizable. You can adjust colors, themes, and animations, and even create custom chart types. If you’re opting for a custom-built dashboard then it’s a solid choice - and can be paired with a headless embedded analytics tool like Embeddable to save even more engineering time on your interactive dashboard project.