How to Build Customer-Facing Dashboards with AG Charts

Building customer-facing dashboards typically presents challenges like balancing customization, scalability, and performance while ensuring seamless integration into your application.

AG Charts simplifies this process by providing powerful tools for creating interactive, user-centric dashboards. However, you may have concerns before committing to a solution:

• Does AG Charts support the chart types and frameworks I need? 
• How easy is it to implement and customize? 
• How can I minimize development time?

This article addresses these questions by exploring:

• The key features of AG Charts, including supported chart types and frameworks
• A step-by-step guide on integrating AG Charts with your applications
• How AG Charts works with headless embedded analytics to optimize your workflows

You'll also find insights into pricing, reviews, and tips to decide if AG Charts is the right choice for your dashboards.

Build dashboards with AG Charts and Embeddable
Get access

What is AG Charts?

AG Charts is a commercial JavaScript charting library that offers a robust solution for building customized, high-performing charts. 

Designed to work well across a variety of frontend frameworks, including React, Angular, Vue.js, and plain JavaScript, AG Charts helps developers integrate rich data visualizations into their applications.

Compared to other charting libraries, like Chart.js or D3.js, AG Charts stands out in its ability to handle large datasets and render high-performance charts that scale without compromising speed. 

Chart.js, for instance, can handle small to medium datasets efficiently but may struggle with larger datasets, something AG Charts excels at. 

So if you need to create a report with a chart for up to 500 rows of data monthly, a solution like Chart.js will work perfectly. But if you’re looking at something more complex, like thousands of customer interactions collected hourly, AG Charts will be a better option.

D3.js, on the other hand, works well with complex data and applications, but this also means it is harder to work with and you’ll need experienced developers. 

Should you use AG Charts?

When evaluating a new charting software, several things come into play, like costs, available support and documentation, the charts you can build, and more. 

Below are some factors to consider:

• Costs. AG Charts is a premium tool and while a free plan is available, it offers very limited options.
• Support and documentation. AG Charts has extensive documentation, though some users report a steep learning curve and customer support that might need some improvements.
• Chart range. The free community plan offers limited options, but the paid versions offer a broad range of charts, including complex ones like financial and heatmaps, which are great for data-heavy applications.
• Framework support. It’s compatible with React, Angular, Vue.js, and JavaScript, giving you flexibility across frameworks.
• Enterprise adoption. AG Charts is used by companies in industries such as finance, SaaS, and e-commerce.

AG Charts—chart types and frameworks

AG Charts offers a versatile selection of chart types to cover a broad range of visualization needs, including:

• Line charts: Ideal for tracking and analyzing trends over time.
• Bar charts: Perfect for comparing quantities across categories.
• Pie and donut charts: Great for showing proportions within a dataset.
• Scatter and bubble charts: Useful for depicting correlations and distributions.
• Area charts: Excellent for showing cumulative totals over time.
• Radar charts: Effective for visualizing multivariate data.
• Heatmaps: Provide insights into data density and intensity.
• Treemaps: Ideal for hierarchical data visualization.
• Waterfall charts: Good for understanding incremental changes in data.
• Financial charts: Essential for financial data presentation.
• And more.

Below, you can see, at a quick glance, the different chart types available.

‍

You can use AG Charts with 4 main frontend frameworks.

• React. The full compatibility with React allows developers to create highly interactive and reusable chart components that integrate smoothly within the framework’s ecosystem. It supports props and state management, making it easy to customize and control chart behavior.
• Angular. AG Charts integrates well with Angular, using its features for dynamic, data-driven visualizations. It’s a great fit for enterprise applications built in Angular that need consistent, high-performance charts.
• Vue.js. When you integrate AG Charts with Vue.js, you can use the framework’s flexible component structure, which will make it easier to create complex, customizable charts within your applications. 
• JavaScript. For applications using plain JavaScript, you can implement AG Charts directly without relying on a specific framework, making it suitable for simpler projects or those using custom frameworks. 

‍

How to use AG Charts

Implementing AG Charts in your application involves the following steps:

Add AG Charts to Your Project 

Install AG Charts by pulling it into your git repository. If you use npm, you’ll need a simple line of code for this:

npm install ag-charts-react

Next, you’ll need to import your chart. Let’s say you’re using React to this. In that case, the code you’ll need will be similar to the following:

import React, { useState } from 'react';

import ReactDOM from 'react-dom/client';

// React Chart Component

import { AgCharts } from 'ag-charts-react';

Please note that each source code snippet is purely for demonstrative purposes. For more in-depth examples, refer to the AG Charts docs.

Configure Chart Components

This step involves customizing the chart elements to align with your application's design and functionality requirements:

• Choose a chart type. Decide on the chart type based on your data visualization needs.
• Define chart options. Use AG Charts' configuration options to set up axes, data series, labels, tooltips, legends, and interactivity. 
• Apply styling. Customize colors, fonts, and other styling elements to match your application's branding.
• Set up responsive design. Use responsive settings to ensure the chart adapts to different screen sizes and devices.

Now you have defined and styled the frontend charts from AG Charts and they are ready to use in your customer-facing analytics experience.

Prepare the data  

To display meaningful data in your charts, you need a backend system that fetches and structures the data. Here’s how to handle this step:

• Identify required data. Determine what metrics or datasets you need for your chart.
• Write SQL queries. Use SQL to query your database for the relevant data.
• Format the data. Ensure the data is returned in a structure compatible with AG Charts, typically an array of objects, and that the data reads nicely for the viewer and is not presented as something like ‘USD.total_revenue’.

Depending on your requirements and data architecture, this may be a simple query or some advanced SQL across multiple tables, even multiple databases. 

You’ll need to consider how you’ll maintain the queries, and look out for dependencies when database schema changes or customer requests require modifications to the underlying data. Consider using a semantic modeling layer like Cube to reduce the burden of maintaining your data models.

Next steps

Once, you have nicely-styled charts and have prepared your data using Cube or by simply writing the SQL queries. This is just the beginning.

Unless you only want to give your customers static dashboards with no interactions available, you’ll need to build in and test interactive features on top of the charts. These can range from a simple filter, through to exporting and scheduling, drilldowns, and potentially even allowing your users to build their own views of your dashboards (with gridding, drag&drop animations, add/remove, edit and save, config management and preserving state to consider).

If you want truly delightful customer-facing dashboards and reports, there’s a lot of other things to consider too, like: Robust row-level security, ensuring fast loading speeds, caching, pre-aggregations etc. 

This is where a headless embedded analytics tool like Embeddable can come in useful…

Save time with headless embedded analytics

Embeddable is a ‘headless’ embedded analytics tool designed to help developers reduce time spent on building, maintaining, and iterating on customer-facing analytics.

 It’s the first ‘headless’ tool, meaning it allows you to bring your own frontend charts into its no-code dashboard management platform - whilst it handles all of your backend considerations for you, like performance, security, data modeling, and management etc. 

The result: You can build a fully bespoke analytics experience without writing thousands of lines of code, all while retaining full control over your front-end UX and UI. 

Here are some of its main benefits.

Build your analytics experience with ease

With headless embedded analytics, you don’t have to spend time creating and maintaining backend processes like SQL queries, caching, and report scheduling. Instead, your team can focus on the front-end user experience without the complexities of back-end integration.

Full control over frontend UX/UI

Using Embeddable, developers maintain complete control over their application’s look and feel. You can still use AG Charts and take advantage of all its charts and tools, but when you pair it with Embeddable, you’ll have easier maintenance and development, faster load times, advanced interactive features, and ultimately a more remarkable user experience.

Save engineering time and resources

Headless analytics saves engineering time by providing a pre-built analytics layer that’s easily customizable, fast to load, and simple to maintain. You won’t need to spend hours writing and rewriting code, so instead you can use your time and resources to develop critical modules for your apps.

How to use AG Charts with Embeddable

If you want to save engineering time on your analytics project and retain full control over the frontend UX/UI, pairing AG Charts with Embeddable helps you save resources and quickly get the results you want. 

How can you do that? Here are a few steps to help you get started.

1. Install and configure AG Charts 

Follow the steps described in the previous section to integrate AG Charts into your application and configure the charts you need so that they match your application’s design system and styling.

2. Push to Embeddable via the SDK

Take the charts you’ve built with AG Charts, and push them to Embeddable via the React SDK. This will make them available in the Embeddable no-code platform, as a version, that allows you to connect it to your data models. From here, you can build beautiful dashboards and analytics without writing a single line of code.

Configure your dashboards

With Embeddable’s no-code builder, you can build as many dashboards as you like, using the charts you’ve defined as re-usable components. Add interactions between charts and any other features you need, like filters, and exporting, in addition to features like allowing your customers to build their own dashboards.

4. Embed the dashboard

Once your dashboard is ready, all you need to do is embed it into your application with Embeddable’s web component. Like everything so far, this step is simple, requiring minimal code. 

Simply follow the instructions on your screen to add script tags and the web component that will allow you to add your dashboard wherever you want on the page. It’s lightweight, loads fast, and provides an elegant method of ensuring your users see only their data—using native row-level security.

For more information and code examples, check out the Embeddable docs.

AG Charts reviews

Most users have a positive opinion of AG charts, liking its flexibility, performance, and extensive feature set.

For instance, a user on the well-known review platform G2, states they like that the charting library “has an extensive feature set, including sorting, filtering, grouping, and customizable cell rendering.”

Another user who also tried AG Grid says they like both products, as they are “highly customizable and very robust with a plethora of features.”

Looking through more AG charts reviews, you can also find people who aren’t so happy with the product. Most of those seem to feel there’s a very steep learning curve, the setup is far from the easiest, and despite the flexibility, some feel there aren’t enough UI templates.

For instance, a user on the G2 platform states that “sometimes documentation does not provide all the answers,” while another user says that “there are very few pre-built UI themes, more will be better.”

AG Charts pricing

AG Charts is a commercial tool and for most features, you’ll need a paid license. If you’re only looking for a few basic charts or want to run a quick test, you can start with the Community plan. 

This is the only free, open-source option with AG Charts, giving you access to charts like bar, line, area, scatter, bubble, pie, donut, and combinations.

The free plan also gives you very few customization options. You can add features like accessibility, localization, tooltips, and series highlighting, but for more advanced elements, like a custom menu, crosshairs, or a navigator, you’ll need a paid license.

For premium licenses, you have two options: 

• AG Charts Enterprise, with prices starting at $499 per developer
• Enterprise Bundle, which gives you access to both AG Charts and AG Grid, with prices starting at $1498 per developer

AG Charts may be one of the best Javascript charting libraries, but it’s also one of the more costly ones. For a small team, the pricing may seem manageable. But if you have a team of 50 developers and you want to give them all access to your AG Charts Enterprise tool, you’ll need to pay $24,950.

You should also keep in mind that these prices only cover one application. If you’re building multiple apps, Enterprise pricing starts at $699 per developer.

Build dashboards with AG Charts and Embeddable
Get access

Frequently asked questions about AG Charts

What chart types are available in AG Charts?

AG Charts offers a comprehensive selection, including line, bar, pie, scatter, area, radar, heatmaps, treemaps, waterfall, and a range of financial charts. They also have a lot of configuration options within the charts, so the ‘default’ can often be molded to fit specific requirements.

How much does AG Charts cost?

AG Charts is available in both a free Community version with limited features and an Enterprise version, where prices start at $499. If you want to also add AG Grids, you’ll need the Bundle version, which costs $1498 per developer.

Can AG Charts be customized to match my application's design?

AG Charts is highly customizable, allowing developers to tailor the chart’s appearance and functionality to align with their application’s design. If you want complete control over your frontend UX/UI but don't want to write much code, use AG Charts alongside Embeddable.

What is the difference between AG Charts vs AG Grid?

AG Charts and AG Grid may sound similar, but they’re different products. AG Charts is suitable for when you need a simple, yet effective visual representation of your data. AG Grid focuses on providing a powerful grid for tabular data. 

In other words, AG Charts is the to-go option if you want to focus on visual storytelling through charts, while AG Grid will help handle the structured data presentation. You can also use the two together, as they complement each other in building a comprehensive dashboard.