What's Covered
amCharts is a powerful data visualization library with versatile features for creating interactive charts and maps. It allows you to deliver complex charts to your customer within your application with reduced engineering effort.
If you’re using amCharts then you’ll have a great head start on creating engaging dashboards and other analytics experiences. However, once you have the front-end charts in place, there’s still a lot of work to do.
This article will help you go from nothing to an interactive and performant customer-facing analytics experience for your customers, by exploring:
- How amCharts helps you create professional-grade visualizations
- The benefits and challenges of using amCharts
- How amCharts integrates with Embeddable to streamline dashboard and analytics development
Build dashboards with amCharts and Embeddable
Get access
What is amCharts?
amCharts is a versatile JavaScript charting library known for its vast array of visualization options and ease of integration. It offers solutions for creating highly customizable charts and maps and supports various front-end frameworks like React, Angular, and Vue.js.
amCharts provides both a free and a paid licensing option. The free plan allows you to use all features but comes with a watermark on your charts, while the paid versions offer priority support and no watermarks. We look at pricing details in more depth below.
Embeddable, the headless embedded analytics tool, partners with amCharts to enable you to easily integrate advanced features like drilldowns, exporting options, and end-user self-service functionality on top of the amCharts charting library.
How amCharts compares with Chart.js and Highcharts
amCharts is known for its extensive range of visualizations, wide usage, and support for advanced interactivity.
From column charts to chord diagrams, the amCharts library provides tools for virtually any data visualization you could need. It also has features like tooltips, animations, and responsive designs that help you create dynamic, user-friendly charts.
In comparison, Chart.js offers a lightweight solution that’s ideal for simple charts but lacks the advanced features that amCharts specializes in.
Similarly, Highcharts offers a broad selection of charts with a strong emphasis on business and corporate use cases. Its library includes simple geographic and stock charting, but without the depth of functionality amCharts offers in these areas.
Another distinguishing feature of amCharts is its attractive, out-of-the-box design. Compare this with Highcharts, which often requires additional customization for a polished look.
What charts can you build with amCharts?
The sky’s the limit when it comes to building charts with amCharts. You can create anything from simple charts to visualize a few data points to complex maps or stock charts that will help you run financial or historical data analysis.
Some of the charts provided in the library include:
- Column and bar charts: Perfect if you want to visualize comparative data across categories.
- Line and area charts: Help showcase trends and changes over time.
- Pie and donut charts: Great for representing proportions or parts of a whole, such as market share distribution.
- Gantt charts: Ideal for project management and timelines.
- Choropleth maps: Use to shade areas of your maps based on data values.
- Point maps: Help mark specific locations on a map.
- Candlestick charts: Widely used in financial data to show stock price movements.
- OHLC charts: Ideal for financial market data visualization.
A unique aspect of amCharts is that it categorizes its offerings into 3 groups, a main one, Charts, and 2 add-ons, Maps and Stock Charts.
- Charts. This product is designed for general-purpose data visualization. It contains all the chart types available in amCharts, though advanced ones, like maps and stock charts, come with basic features only.
- Maps. This add-on is tailored for visualizing geographical data with stunning detail. It supports drilldowns and includes advanced tooltips with dynamic data displays, animations, and flows.
- Stock Charts. For financial and historical data analysis, this add-on provides basic candlestick and OHLC charts. The Stock Charts add-on also includes advanced features like built-in data aggregation, advanced annotations, indicators, and support for multi-axis and multi-dataset charts.
On top of all these options, you can use amCharts with several front-end frameworks.
- React. With a component-based architecture, React aligns well with amCharts, allowing you to use individual charts as reusable components in your React application. You can integrate the library as an npm package, making it straightforward to include in your React project.
- Angular. Its structured framework makes Angular a great choice for enterprise-grade applications, and amCharts fits neatly into this ecosystem. Using Angular's dependency injection system, you can configure and reuse amCharts components with ease in your application.
- Vue.js. This framework offers a lightweight and flexible development experience, and amCharts complements this simplicity with its intuitive API. You can include amCharts in Vue projects either through npm or as a direct script inclusion, depending on your project setup.
amCharts Pricing
As explained above, amCharts offers a free version that includes a small watermark on charts. You can remove this with a commercial license, available as either an Annual or Perpetual subscription.
- Annual license: Starts at $80 per seat for the Basic plan (no support), $280 per seat for the SaaS plan (with support), and $1,200 per seat for the OEM plan for redistributable apps. Pricing applies per product—Charts, Maps, or Stock Charts. For example, a SaaS license for all three products costs $840 per seat annually.
- Perpetual license: A one-time purchase starting at $180 per seat for the Basic plan, $650 per seat for the SaaS plan, and $2,700 per seat for the OEM plan. As with the annual license, pricing is per product.
You can find more details on amCharts’ pricing page.
amCharts reviews
amCharts has received positive feedback for its ease of use and functionality. Used by companies like Microsoft, PayPal, Symantec, eBay, and Samsung, the charting library stands out for its variety of charts, customizability, interactivity, and performance.
Looking at amCharts reviews on the popular review website G2, we find users who say it’s among the best JavaScript charting libraries they’ve used. “One of the best charts I know. The flexible chart allows me to display data of any size easily. It also allows me to make comparisons between several pieces of data. It’s fast and comfortable!”
Another user says, “I like that it has almost all the types of charts that we want to present to stakeholders to make sure that insights are being delivered in the most efficient manner.”
Users also praise the customization options for maps and diagrams: “The responsive chart diagrams in the builder with the automatic integration with the bullet plugin. The dropdown list for the different countries to complete the diagram. The waffle chart model is a new possibility to create a clear overview, this is a tool I’ve never seen before, also the maps are very accurate.”
Are there any cons according to reviews? Yes, but nothing that can’t be overcome. Some mention there’s a steep learning curve, and the documentation isn’t always comprehensive but, once you get used to the platform, it becomes a lot easier to use.
That said, any charting library is only going to give you the front-end charts—integrating your charts into an interactive, performant, and scalable customer-facing analytics feature isn’t always straightforward.
You’ll need to consider your data architecture and models; latency and freshness of the data; handling interactive elements like filters and exports and more. We explain how to overcome these issues in our look at headless embedded analytics.
How to use amCharts
Installing and using amCharts is fairly straightforward and requires just a few easy steps.
1. Install amCharts
To get started with amCharts, you need to first include it in your project. You can install it via npm using the command npm install @amcharts/amcharts5, which integrates it with your project dependencies.
Alternatively, you can include it using <script> tags directly in your HTML file, which is suitable for simpler setups or when working without a module bundler.
For projects using TypeScript, installing @amcharts/amcharts5 also provides type definitions, enabling better code completion and error detection.
2. Pull charts into your repo
Once installed, import the chart types you need from the amCharts package into your project files. Start by initializing a basic chart and attaching it to an HTML container in your app.
For example, use Chart.create() to define a chart, and then pass your configuration, including data and styling, to render it. The library’s modular approach ensures you only load the components required for your specific charts, keeping your project lightweight and optimized.
Refer to the official amCharts documentation for detailed guides on setting up different chart types.
3. Customize components
After setting up the initial chart, tailor it to match your application’s specific design needs. Use amCharts' extensive configuration options to change colors, tooltips, axes, and interactivity.
For instance, you can add animations to data updates, create custom tooltips with HTML, or include interactivity such as zooming and click-based drilldowns in some charts.
4. Next steps
The following steps will depend on your project needs but can include stages like writing SQL queries to fetch data, connecting to a database, setting up caching for faster performance, and configuring interactions between charts.
Benefits of headless embedded analytics
The headless embedded analytics solution offered by Embeddable further simplifies the development and maintenance of dashboards and other customer-facing analytics features. Here’s how.
Build analytics quickly
With Embeddable, you can avoid a large slice of the engineering time required to build, maintain, and optimize your customer-facing analytics experiences.
You don’t need to spend engineering time on setting up a scalable and performant data layer, making adjustments in code, or building custom views of dashboards for your users.
Embeddable provides a performant data layer, and allows you to use your styled amCharts components as reusable elements in a no-code dashboard builder where your non-technical team members can create and update dashboards with no engineering support.
This allows you to build stronger dashboards and apps in less time while focusing your energy on more important tasks.
Maintain full front-end control
amCharts lets you build beautiful charts with ease, with your own design principles applied to them in code.
Unlike other embedded analytics tools, Embeddable allows you to import amCharts (and charts from other charting libraries) as reusable components in a no-code environment, giving your team the benefits of an ‘off-the-shelf’ tool with full control over your front end.
Charts can load natively with full extensibility and they’re easy to tweak and personalize for each end-user.
Save time and ensure fast loading speeds
Headless embeddable analytics saves time you’d otherwise spend writing code from scratch. Uniquely, it allows you to get the benefits of using a frontend charting library like amCharts, whilst giving you the known benefits of using an embedded analytics tool.
Embeddable is built from the ground up for speed, with a built-in caching layer that enables pre-aggregations and a web component-based embedding method that enables you to deliver sub-second loading times, just like every other page in your application!
Embeddable’s partnership with amCharts helps you take advantage of all these benefits right from the start, whether you’re using the free or paid license.
By using the two solutions in tandem, you can deliver an outstanding analytics experience with fast loading times, and a fully native feel, all with minimal engineering effort.
How to use amCharts with Embeddable
Once you’ve created your charts using amCharts, Embeddable can help you integrate them seamlessly into your application while also taking care of the backend, security, performance, and maintenance of your dashboards.
Here’s how to use the two solutions together.
1. Push charts to Embeddable with the SDK
Once your charts are defined and styled using the steps above, use Embeddable’s SDK to push them into your Embeddable workspace.
By mapping the component’s properties, you’ll enable Embeddable to inject values into those props - this enables you to modify the chart in the bulder, for example: editing colours, adding data labels, enabling export options etc. You can make any prop configurable in the builder.
This step also helps you make the charts more reusable, simplifying dashboard management over the longer term.
2. Configure your dashboards
In the no-code builder, you can connect the charts to your data, define interactions like filters, and easily build them into interactive dashboard experiences. Options include defining layouts, and group-related charts, and creating a seamless user experience. Add filters and global parameters so users can interact with multiple charts simultaneously.
3. Embed your dashboards
Embed the completed dashboards into your application with a lightweight and performant web component. This makes it easy to integrate dashboards into your application, rendering the charts securely in sub-second speeds with a completely native feel for the end user.
Simply follow the instructions, and add script tags and web components to display the dashboard wherever you want the page. To render different data to different users, you can apply row-level or column-level filters when calling the Embeddable API.
Using amCharts and Embeddable for data visualization
amCharts is a comprehensive charting library that works well for developers seeking robust, customizable data visualization tools.
Paired with Embeddable, it’s an even more powerful solution for creating customer-facing dashboards with advanced analytics features.
Together, amCharts and Embeddable allow you to deliver high-quality user experiences without the hassle of building and maintaining a complex custom-built analytics feature with your engineering team.
Build dashboards with amCharts and Embeddable
Get access
Frequently asked questions about amCharts
Can amCharts be used in a React application?
Yes, amCharts supports React, offering strong type-checking and full integration with TypeScript. You can use it as an npm package or integrate it with <script> tags.
Which charts does amCharts include?
amCharts supports various charts, including column, line, pie, radar, Gantt, and more. It also offers map and stock charting options.
What is the pricing model for amCharts’ charting library?
amCharts offers both free and paid plans. The free version includes watermarked charts, while the paid version provides full functionality and priority support. Pricing is usage-based.