FusionCharts: How to Build & Manage Customer-Facing Dashboards

If you’re planning to build dashboards and reports into your frontend application for your customers, there are a few approaches, each having their own benefits and concessions to make. 

An in-house build will give you full control over your UX and UI, whereas a traditional ‘off-the-shelf’ embedded analytics tool will save you on the engineering side but reduce the control you have over your user experience.  

If you’re going for a custom in-house build, you’ll need a charting library that offers versatility through extensive customization, robust integration capabilities, and responsive design for all devices.

One popular solution is FusionCharts, a commercial JavaScript charting library that helps you deliver visually stunning, feature-rich dashboards. 

But even with a powerful tool like FusionCharts, there are ways to enhance your dashboards further, adding advanced features that create a more seamless and engaging user experience.

In this article, we’ll explore:

• What FusionCharts is and what it offers
• FusionCharts pricing
• How to use FusionCharts effectively
• How to pair FusionCharts with Embeddable to quickly create interactive dashboards 

Build FusionCharts with FusionCharts and Embeddable

Get access

What is FusionCharts?

FusionCharts is a JavaScript charting library designed to make creating data visualizations easier for developers. It’s a go-to solution for businesses looking for professional-grade charting capabilities.

What sets FusionCharts apart from competitors is its extensive chart library, interactive features, and cross-platform compatibility. This tool goes beyond simple visualizations, enabling the creation of charts that are both customizable and scalable.
‍

FusionCharts—complementary tools

Beyond simple charts, FusionCharts offers a set of complementary tools and products that will help you create almost any data visualization you want.

• FusionGrid: Helps display tabular data in dashboards. It supports features like sorting, filtering, pagination, and inline editing, making it ideal for data-heavy applications. FusionGrid is fully customizable and you can integrate it easily with FusionCharts. 

• FusionWidget: Handles real-time data visualizations and interactive KPIs. Widgets include dials, gauges, thermometers, and other business-centric components used to monitor performance metrics or system statuses. 

• PowerCharts: Offers specialized chart types tailored to advanced analytics and complex datasets. Examples include candlestick charts for stock market data, heatmaps for density analysis, and box-and-whisker plots for statistical insights. 

• FusionMaps: Provides a robust platform for creating interactive geographic visualizations. It supports over 2000 pre-defined maps, covering everything from continents and countries to custom regions like sales territories. 

• FusionTime: Designed for building time-series charts, which are critical for tracking data trends over intervals. It includes features like zooming, panning, and real-time data updates, making it ideal for applications like stock market monitoring, website analytics, or IoT device performance tracking. 

• FusionExport: Helps users export charts and dashboards in formats like PDF, PNG, or JPG. A useful feature is its ability to export dashboards hosted remotely, enabling companies to create and distribute static reports from live data sources.
  ‍

FusionCharts—chart types

FusionCharts supports a wide variety of charts and graphs to meet diverse business needs. Some of these include:

• Column and bar charts: Ideal for comparing categories or tracking progress over time.
• Line and area charts: Great for trends and continuous data.
• Pie and doughnut charts: Suitable for showing proportions and percentages.
• Heatmaps and geo maps: Useful for location-based data and density analysis.
• Radar and gauge charts: Often used for performance tracking or KPIs.
• Gantt charts: Designed for project management and timelines.
• Sankey and funnel charts: Useful for visualizing flows and processes.

FusionCharts—integrations

You can integrate FusionCharts with various front-end and back-end frameworks from React and Angular, to Angular and PHP.

Let’s explore some of the most common frameworks to use with FusionCharts:

• React. With this integration, you can use the FusionCharts React components to create and manage charts as part of a React-based application. React's component-driven architecture and props-based configuration make for simple integration, enabling dynamic updates and interaction with state and props. 

• Angular. A comprehensive framework for building single-page applications, Angular is fully supported in FusionCharts. You can leverage the FusionCharts-Angular wrapper to embed charts directly into their templates.

• Vue.js. FusionCharts is also compatible with Vue.js, a progressive framework popular for its simplicity and flexibility. You can use the FusionCharts-Vue component to add charts to Vue applications effortlessly. The integration takes advantage of Vue's declarative syntax, allowing developers to bind chart properties directly to their data. 

• jQuery. For developers working on legacy projects or lightweight applications, FusionCharts supports jQuery integration. This allows you to initialize and configure using familiar jQuery methods, ensuring compatibility with existing codebases.
  ‍

FusionCharts reviews

Like any software, FusionCharts has its pros and cons. Most users like the impressive range of charts, the extensive documentation, and the seamless integration with frameworks like React or Angular. 

At the other end of the spectrum, some say the learning curve is very steep, making FusionCharts challenging especially for those unfamiliar with JavaScript charting libraries. Plus, many users complain about the licensing model, which can be very pricey for smaller teams or startups.

Reading FusionCharts reviews, one user on the G2 review platform says, “One of the key features of FusionCharts is its ability to handle large datasets and render them quickly, making it ideal for displaying real-time data. It also provides a wide range of customization options, allowing developers to create unique and visually appealing data visualizations that match their brand or application's design.”

Another user on the same platform explains they “like the variety of charts and graphs available, as well as the simplicity to both implement with complex data as well as the ability to theme the graphs to match your own theme and styles.”

In terms of negative feedback, many users complain about the amount of manual customizations needed: “I wish there were even more modern themes so that we did not have to add so much custom styling. FusionCharts would benefit from a UI/UX designer to assist in the creation of their chart themes. Little things like rounded corners go a long way.”

Others feel performance could be improved: “Performance is not good while loading charts with large datasets.”

Looking at all the reviews, it’s clear that FusionCharts is one of the most well-regarded JavaScript charting libraries, but sometimes you’ll still have a lot of work on your hands to achieve the results you want. 

You’ll see how to minimize this effort below—so you don’t spend hours writing code, and can easily improve performance, security, and the user experience.
‍

FusionCharts pricing

FusionCharts offers four pricing tiers: 

• Basic is the most affordable option and is ideal for a small internal application or student project. This license costs $439 per year and can be used by one developer for one product. This tier has only community support and offers access to all complementary tools, except FusionExport. 
  ‍
  FusionGrid also costs an additional $499 per year. If you want to add priority, premium support, you’ll need to pay an extra $499 per year.
  ‍

• Pro is the second tier, with a price of $1,899 per year, which offers access to up to five developers for a single project. This time, you have access to all complementary tools, though you still have to pay $499 per year if you want to use FusionGrid.
  
  The Pro license also comes with professional technical support, though priority support costs the same $499 per year.
  ‍

• Enterprise costs $3,399 per year and may be better for SaaS apps and large teams. This license includes all complementary tools and priority support at no additional cost.
  ‍

• Enterprise+ is the final tier, made for large organizations, with a custom price, depending on your needs.
  ‍

Should you use FusionCharts?

FusionCharts is a good choice for businesses and developers needing robust data visualization tools. Here's a quick breakdown of the most important things to consider:

• Pricing: Paid, with options for various team sizes.
• Chart range: Extensive, covering most standard and advanced chart types.
• Documentation: Well-maintained but can be overwhelming for newcomers.
• Framework support: Compatible with React, Angular, Vue.js, and more.
• Notable users: Trusted by companies like Apple, Oracle, and Cisco.

Compared to similar libraries, like amCharts or HighCharts, FusionCharts offers a comprehensive library with many features that make dashboard creation easier. amCharts also offers many chart types, but it is usually better with static or less interactive data.

Highcharts, on the other hand, is preferable if you need financial or stock charting, but FusionCharts will provide more options for other use cases. Highcharts also requires pricey add-ons, whereas FusionCharts gives you everything you need with a simpler subscription model.

If you prioritize customization, advanced features, and compatibility, FusionCharts is worth considering. For simpler use cases or tighter budgets, free libraries like Chart.js might be more appropriate.
‍

How to use FusionCharts

Using FusionCharts in a React project is fairly straightforward. The steps below guide you through integrating FusionCharts into a React application, covering installation, configuration, and chart creation. 

Note that while these steps are tailored to React, FusionCharts can also be used with other frameworks, such as Angular or Vue, by following their respective setup guides. 
‍

1. Install FusionCharts

Begin by installing FusionCharts and its React component using npm:

npm install fusioncharts react-fusioncharts --save
‍

2. Set Up Your React Project

If you haven’t already set up a React project, you can create one using Create React App:

npx create-react-app first-fusioncharts-project

cd first-fusioncharts-project

‍

3. Integrate FusionCharts into Your Project

After installing the necessary packages, import FusionCharts and its components into your project. In your App.js file, include the following imports:

import React from "react";

import FusionCharts from "fusioncharts";

import Charts from "fusioncharts/fusioncharts.charts";

import ReactFC from "react-fusioncharts";

import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

‍

// Add dependencies to FusionCharts

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

‍

3. Prepare the data

Before you can create a chart, you need to select the data you’ll be using. Using a sample dataset at this stage is useful, so you don’t have to write complex SQL queries before you’ve got somewhere to display it. Here’s an example:
‍

const chartData = [

  { label: "United States", value: "290" },

  { label: "United Kingdom", value: "260" },

  { label: "Canada", value: "180" },

  { label: "France", value: "140" },

  { label: "Germany", value: "115" },

  { label: "Spain", value: "100" },

  { label: "Portugal", value: "30" },

  { label: "Italy", value: "30" }

];
‍

4. Configure your chart

Once your data is ready, it’s time to configure the chart. Choose the type of chart you want, style it, and make any other adjustments you need. For example:
‍

const chartConfigs = {

  type: "column2d", // Chart type

  width: "700", // Width of the chart

  height: "400", // Height of the chart

  dataFormat: "json", // Data type

  dataSource: {

    chart: {

      caption: "Countries With Most Oil Reserves [2017-18]",

      subCaption: "In MMbbl = One Million barrels",

      xAxisName: "Country",

      yAxisName: "Reserves (MMbbl)",

      numberSuffix: "K",

      theme: "fusion"

    },

    data: chartData

  }

};
‍

5. Next steps

Creating the chart is only the first part of your project. There’s still quite a lot to do before you have an interactive, performant analytics experience in your production application. 

You’ll still need to hook up the charts with your database/warehouse/lake, define interactions between charts and filters, write manual SQL queries for each chart, implement caching, manage load on your database, and ensure data is filtered to just that one customer.

And the real killer: Any changes you make in the future have to be handled by your engineering team. New charts, export options, modifications for certain customers, improving performance, updating SQL queries to fit new data model definitions (plus QA, of course!)… It's all a lot of work.

This is where Embeddable comes into play…
‍

Benefits of headless embedded analytics

Embeddable is a headless embedded analytics solution that allows you to use FusionCharts (or any other charting library), whilst handling your data service, performance, and security. This enables you to manage dashboards and customer requests through a no-code interface. 

This means you’ll have much more flexibility and the benefits of a custom build, which aren’t possible when you use off-the-shelf embedded analytics tools

Here’s how it can help:
‍

Save engineering time

With Embeddable, you don’t need to write code from scratch for every single customization. Instead, you can use the no-code builder to connect your fully-custom charts to your data models to build new dashboards in minutes, and make updates on the fly with no coding required. 

It also provides advanced features off-the-shelf, like exporting and scheduling, and lets you build your own dashboard views without having to create or manage them yourself. 
‍

Keep full control over your UI/UX

Uniquely, Embeddable allows you to import any charts you like, as code, giving you complete control over the front-end experience and ensuring charts blend seamlessly into your application’s look and feel.
‍

Developer-friendly experience 

Embeddable is built for scalability, performance, security, and extendability. It works with your CI/CD processes, embeds seamlessly in any front end (even mobile apps), and handles both single-tenant and multi-tenant database architectures with ease.  
‍

How to use FusionCharts with Embeddable

Once you create your charts, you need to integrate them into your app. Embeddable allows you to achieve this via a lightweight web component or native React embed. 

Embeddable handles all the issues you don’t want to worry about, like performance, caching, row-level security, and advanced user features.   

Here’s how to use the two together:
‍

1. Create your FusionChart charts

Install and create your charts as you normally would. If in doubt, follow the steps highlighted above, or use the FusionCharts tutorials.
‍

2. Push Charts to Embeddable

Using the SDK, push your FusionCharts components to Embeddable. Your chart will then immediately be available in the no-code builder. This step integrates your chart as a version, allowing you to modify it as needed, and reuse it to create countless dashboards.
‍

3. Craft your dashboard

Once you’ve pushed your FusionCharts components to Embeddable, it’s time to craft your dashboard. 

Use the no-code builder to combine data models and charts and build your dashboards in no time. 

If you want, you can also add features like exporting, or allow your end users to build their own custom dashboard views, making report creation easier and giving your users more flexibility.
‍

4. Embed your dashboard

The final step will be embedding your dashboard into your application using Embeddable’s web component or native React embed. 

The charts will load natively, giving everything a native feeling and allowing bi-directional communication with your application (unlike in an iframe!).

When you render the dashboard for the user, it’s protected with a secure session token retrievable from our Tokens API—send over any row-level filters you want when you make the request so you can render different data for different users.
‍

Summary: Build dashboards even faster with FusionCharts and  Embeddable

FusionCharts offers a professional-grade solution for developers needing extensive charting options and interactive features. It has a nice balance of power and ease of use, enabling you to create visualizations that match your application’s design system and deliver data effectively.

When paired with Embeddable, it becomes even more powerful, allowing you to deliver advanced features easily, and removing the burden of building and managing (and QA’ing) the whole analytics project with your engineering time. 

This enables you to focus on building other core features of your applications. 

Build dashboards with FusionCharts and Embeddable

Get access

Frequently asked questions about FusionCharts

What types of data visualizations are available in FusionCharts?

FusionCharts supports over 100 chart types, including column, bar, line, pie, heatmaps, geo maps, and Gantt charts, making it one of the most comprehensive libraries available.
‍

Is FusionCharts compatible with React, Vue, Angular & JavaScript?

Yes, FusionCharts works seamlessly with React, Vue.js, Angular, and vanilla JavaScript, providing flexibility for modern development frameworks.
‍

How much does FusionCharts cost?

FusionCharts requires a paid license, with pricing based on the number of developers and use cases. Costs can range from hundreds to thousands of dollars annually.