React FusionCharts

React-FusionCharts

An easy-to-use, lightweight React component for the FusionCharts JavaScript Charting Library

The React-FusionCharts component lets you easily include FusionCharts in your React projects and add interactive charts to your React applications.

Features

Adds a chart using just one single component.
Auto-updates the chart object when the data source is modified.
Adds a chart from a JSON URL, from a XML URL, or using props Binding.

Allows you to enable interactivity between Javascript charts
Offers advanced control by giving you access to the complete FusionCharts object (containing the chart configuration).

Quick Demo:

A Simple Chart

A simple chart with all data embedded into the directive

A Simple TimeSeries

FusionTime

A simple time-series chart with a single series plotted as line

Column chart with time axis

FusionTime

Time-series chart with series plotted as column.

Area chart with time axis

FusionTime

Time-series chart with series plotted as area.

A 3D Pie Chart

A 3D pie chart using the datasource attribute from component's scope

A simple gauge

A simple gauge to show customer satisfaction score

A Column, Line and Area Combi Chart

A combination chart of column, line and area

Column and line combination on time axis

FusionTime

Two series of data plotted as a combination of column & line on the same y-axis.

Plotting multiple series on time axis

FusionTime

A multi-series chart with 2 variables plotted as line on the same y-axis.

Plotting two variables (measures)

FusionTime

Plotting 2 different variables in 2 different vertically stacked canvases.

Fetch data from JSON URL

Fetch data remotely from a JSON file or URL

Fetch data from XML URL

Fetch data remotely from an XML file or URL

Update chart data

Change the data dynamically and watch the chart update automatically

Update chart attribute

Update the chart with new attributes

Listen to events from chart

Bind event listener to the chart and get the related event data

Percentage Calculation

Hover on a plot to see the percentage value with respect to total

Add drill-down to chart

Use LinkedCharts to quickly add drill-down to charts

Adding a reference line

FusionTime

Adding a static reference line (by value) to indicate targets or threshold.

Annotating single data point

FusionTime

Annotating specific data point using data markers on line series

Single event overlay

FusionTime

Plotting an event marker to indicate an event for a specific date.

Date range event overlay

FusionTime

Plotting an event marker as a band, to indicate an event that spans a data range.

World Map

World map showing data for different continents

Export multiple charts

Use Batch Export Feature to export multiple charts as a single image/PDF

Special events

Drag a projected column to see its change

Lifecycle events

This sample lists the basic lifecycle events at the time of rendering FusionCharts.

Dynamically add chart event listener

How you can dynamically(runtime) add & remove chart specific events in FusionCharts

Slice data plots

Use Chart specific custom API

Responsive charts

Select any of the dimensions given in the list. The chart adjusts itself to its alloted percentage

Change chart type at run time

Change the chart type dynamically or at runtime

Use annotations

Add custom shapes to highlight a specific data point

Usage of FusionCharts methods (API)

Change a chart attribute by calling FusionCharts setChartAttribute API

Applying a different theme

Choosing from different themes available in FusionCharts Suite

Interactive candlestick chart

FusionTime

Time-series chart plotted as candlestick, with 4 different values for each plot (open, high, low, close)

 
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
​
ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
​
const chartConfigs = {
  type: 'column2d',
  width: 600,
  height: 400,
  dataFormat: 'json',
  dataSource: {/* see data tab */ },
};
​
class Chart extends Component {
  render () {
    return <ReactFC {...chartConfigs} />;
  }
}
​
ReactDOM.render(
  <Chart />,
  document.getElementById('root'),
);
​

Quick Start

Step 1: Install the React-FusionCharts wrapper framework

In the terminal run the following command:

$ npm install react-fusioncharts --save
 
$ npm install react-fusioncharts --save

Also install fusionCharts, if it is not already installed:

$ npm install fusioncharts --save
 
$ npm install fusioncharts --save

Step 2: Import the ReactFC component

After installing react-fusioncharts, import it in your React app:

import React from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const myDataSource = {
	"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": [
		{
			"label": "Venezuela",
			"value": "290"
		},
		{
			"label": "Saudi",
			"value": "260"
		},
		{
			"label": "Canada",
			"value": "180"
		},
		{
			"label": "Iran",
			"value": "140"
		},
		{
			"label": "Russia",
			"value": "115"
		},
		{
			"label": "UAE",
			"value": "100"
		},
		{
			"label": "US",
			"value": "30"
		},
		{
			"label": "China",
			"value": "30"
		}
	]
};

const chartConfigs = {
  	type: 'column2d',
  	width: 600,
  	height: 400,
  	dataFormat: 'json',
  	dataSource: myDataSource,
};

ReactDOM.render(
  	<ReactFC {...chartConfigs} />,
  	document.getElementById('root'),
);
 
import React from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
​
ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
​
const myDataSource = {
    "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": [
        {
            "label": "Venezuela",
            "value": "290"
        },
        {
            "label": "Saudi",
            "value": "260"
        },
        {
            "label": "Canada",
            "value": "180"
        },
        {
            "label": "Iran",
            "value": "140"
        },
        {
            "label": "Russia",
            "value": "115"
        },
        {
            "label": "UAE",
            "value": "100"
        },
        {
            "label": "US",
            "value": "30"
        },
        {
            "label": "China",
            "value": "30"
        }
    ]
};
​
const chartConfigs = {
    type: 'column2d',
    width: 600,
    height: 400,
    dataFormat: 'json',
    dataSource: myDataSource,
};
​
ReactDOM.render(
    <ReactFC {...chartConfigs} />,
    document.getElementById('root'),
);

Render FusionMaps

To render a map, import the FusionMaps module along with the map definition.

import React from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.world';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);

const myDataSource = {
	"chart": {
		"caption": "Average Annual Population Growth",
		"subcaption": " 1955-2015",
		"numbersuffix": "%",
		"includevalueinlabels": "1",
		"labelsepchar": ": ",
		"entityFillHoverColor": "#FFF9C4",
		"theme": "fusion"
	},
	"colorrange": {
		"minvalue": "0",
		"code": "#FFE0B2",
		"gradient": "1",
		"color": [
			{
				"minvalue": "0.5",
				"maxvalue": "1.0",
				"color": "#FFD74D"
			},
			{
				"minvalue": "1.0",
				"maxvalue": "2.0",
				"color": "#FB8C00"
			},
			{
				"minvalue": "2.0",
				"maxvalue": "3.0",
				"color": "#E65100"
			}
		]
	},
	"data": [
		{
			"id": "NA",
			"value": ".82",
			"showLabel": "1"
		},
		{
			"id": "SA",
			"value": "2.04",
			"showLabel": "1"
		},
		{
			"id": "AS",
			"value": "1.78",
			"showLabel": "1"
		},
		{
			"id": "EU",
			"value": ".40",
			"showLabel": "1"
		},
		{
			"id": "AF",
			"value": "2.58",
			"showLabel": "1"
		},
		{
			"id": "AU",
			"value": "1.30",
			"showLabel": "1"
		}
	]
};

const chartConfigs = {
  	type: 'world',
  	width: 600,
  	height: 400,
  	dataFormat: 'json',
  	dataSource: myDataSource,
};

ReactDOM.render(
  	<ReactFC {...chartConfigs} />,
  	document.getElementById('root'),
);
 
import React from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.world';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
​
ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);
​
const myDataSource = {
    "chart": {
        "caption": "Average Annual Population Growth",
        "subcaption": " 1955-2015",
        "numbersuffix": "%",
        "includevalueinlabels": "1",
        "labelsepchar": ": ",
        "entityFillHoverColor": "#FFF9C4",
        "theme": "fusion"
    },
    "colorrange": {
        "minvalue": "0",
        "code": "#FFE0B2",
        "gradient": "1",
        "color": [
            {
                "minvalue": "0.5",
                "maxvalue": "1.0",
                "color": "#FFD74D"
            },
            {
                "minvalue": "1.0",
                "maxvalue": "2.0",
                "color": "#FB8C00"
            },
            {
                "minvalue": "2.0",
                "maxvalue": "3.0",
                "color": "#E65100"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": ".82",
            "showLabel": "1"
        },
        {
            "id": "SA",
            "value": "2.04",
            "showLabel": "1"
        },
        {
            "id": "AS",
            "value": "1.78",
            "showLabel": "1"
        },
        {
            "id": "EU",
            "value": ".40",
            "showLabel": "1"
        },
        {
            "id": "AF",
            "value": "2.58",
            "showLabel": "1"
        },
        {
            "id": "AU",
            "value": "1.30",
            "showLabel": "1"
        }
    ]
};
​
const chartConfigs = {
    type: 'world',
    width: 600,
    height: 400,
    dataFormat: 'json',
    dataSource: myDataSource,
};
​
ReactDOM.render(
    <ReactFC {...chartConfigs} />,
    document.getElementById('root'),
);

Working with Events

To attach event callbacks to a FusionCharts component, follow the pattern below.

Write the callback:

As a separate function:

var chartEventCallback  = function (eventObj, dataObj) {
  [Code goes here]
}
 
var chartEventCallback  = function (eventObj, dataObj) {
  [Code goes here]
}

Or, as a component class method:

chartEventCallback (eventObj, dataObj) {
  [Code goes here]
}
 
chartEventCallback (eventObj, dataObj) {
  [Code goes here]
}

Attach the callback to an event through the React-FC component:

<ReactFC {...chartConfigs} fcEvent-EVENTNAME={this.chartEventCallback} />
 
<ReactFC {...chartConfigs} fcEvent-EVENTNAME={this.chartEventCallback} />

Where, EVENTNAME is to be replaced by the event you want to track.

Consider the example below that tracks hover events on a data plot.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const myDataSource = {
	"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": [
		{
			"label": "Venezuela",
			"value": "290"
		},
		{
			"label": "Saudi",
			"value": "260"
		},
		{
			"label": "Canada",
			"value": "180"
		},
		{
			"label": "Iran",
			"value": "140"
		},
		{
			"label": "Russia",
			"value": "115"
		},
		{
			"label": "UAE",
			"value": "100"
		},
		{
			"label": "US",
			"value": "30"
		},
		{
			"label": "China",
			"value": "30"
		}
	]
};

const chartConfigs = {
  type: 'column2d',
  width: 600,
  height: 400,
  dataFormat: 'json',
  dataSource: myDataSource,
};

class Chart extends Component {
  constructor(props) {
    super(props);

    this.state = {
      actualValue: 'Hover on the plot to see the value along with the label',
    };

    this.showPlotValue = this.showPlotValue.bind(this);
  }

  // Event callback handler for 'dataplotRollOver'.
  // Shows the value of the hovered plot on the page.
  showPlotValue(eventObj, dataObj) {
    this.setState({
      actualValue: `You’re are currently hovering over ${dataObj.categoryLabel} whose value is ${dataObj.displayValue}`,
    });
  }

  render() {
    return (
      <div>
        <ReactFC {...chartConfigs} fcEvent-dataplotRollOver={this.showPlotValue} />
        <p style={{ padding: '10px', background: '#f5f2f0' }}>{this.state.actualValue}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <Chart />,
  document.getElementById('root'),
);
 
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
​
ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
​
const myDataSource = {
    "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": [
        {
            "label": "Venezuela",
            "value": "290"
        },
        {
            "label": "Saudi",
            "value": "260"
        },
        {
            "label": "Canada",
            "value": "180"
        },
        {
            "label": "Iran",
            "value": "140"
        },
        {
            "label": "Russia",
            "value": "115"
        },
        {
            "label": "UAE",
            "value": "100"
        },
        {
            "label": "US",
            "value": "30"
        },
        {
            "label": "China",
            "value": "30"
        }
    ]
};
​
const chartConfigs = {
  type: 'column2d',
  width: 600,
  height: 400,
  dataFormat: 'json',
  dataSource: myDataSource,
};
​
class Chart extends Component {
  constructor(props) {
    super(props);
​
    this.state = {
      actualValue: 'Hover on the plot to see the value along with the label',
    };
​
    this.showPlotValue = this.showPlotValue.bind(this);
  }
​
  // Event callback handler for 'dataplotRollOver'.
  // Shows the value of the hovered plot on the page.
  showPlotValue(eventObj, dataObj) {
    this.setState({
      actualValue: `You’re are currently hovering over ${dataObj.categoryLabel} whose value is ${dataObj.displayValue}`,
    });
  }
​
  render() {
    return (
      <div>
        <ReactFC {...chartConfigs} fcEvent-dataplotRollOver={this.showPlotValue} />
        <p style={{ padding: '10px', background: '#f5f2f0' }}>{this.state.actualValue}</p>
      </div>
    );
  }
}
​
ReactDOM.render(
  <Chart />,
  document.getElementById('root'),
);

Working with APIs

To call APIs we will need the chart object. To get the chart object for an React-FC component, pass a callback through the attribute onRender.

Write the callback:

As a separate function:

var chartRenderCallback  = function (chart) {
  [Code goes here]
}
 
var chartRenderCallback  = function (chart) {
  [Code goes here]
}

Or, as a component class method:

chartRenderCallback (chart) {
  [Code goes here]
}
 
chartRenderCallback (chart) {
  [Code goes here]
}

Pass the callback as a prop, to which the chart object will be returned on rendering:

<ReactFC {...chartConfigs} onRender={chartRenderCallback} />
 
<ReactFC {...chartConfigs} onRender={chartRenderCallback} />

Consider the example below that converts a Column 2D chart to a Pie 2D chart after 5 seconds.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const myDataSource = {
	"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": [
		{
			"label": "Venezuela",
			"value": "290"
		},
		{
			"label": "Saudi",
			"value": "260"
		},
		{
			"label": "Canada",
			"value": "180"
		},
		{
			"label": "Iran",
			"value": "140"
		},
		{
			"label": "Russia",
			"value": "115"
		},
		{
			"label": "UAE",
			"value": "100"
		},
		{
			"label": "US",
			"value": "30"
		},
		{
			"label": "China",
			"value": "30"
		}
	]
};

const chartConfigs = {
  type: 'column2d',
  width: 600,
  height: 400,
  dataFormat: 'json',
  dataSource: myDataSource,
};

class Chart extends Component {
  // Convert the chart to a 2D Pie chart after 5 secs.
  alterChart(chart) {
    setTimeout(() => {
      chart.chartType('pie2d');
    }, 5000);
  }

  render() {
    return (
      <div>
        <ReactFC {...chartConfigs} onRender={alterChart} />
      </div>
    );
  }
}

ReactDOM.render(
  <Chart />,
  document.getElementById('root'),
);
 
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
​
ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
​
const myDataSource = {
    "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": [
        {
            "label": "Venezuela",
            "value": "290"
        },
        {
            "label": "Saudi",
            "value": "260"
        },
        {
            "label": "Canada",
            "value": "180"
        },
        {
            "label": "Iran",
            "value": "140"
        },
        {
            "label": "Russia",
            "value": "115"
        },
        {
            "label": "UAE",
            "value": "100"
        },
        {
            "label": "US",
            "value": "30"
        },
        {
            "label": "China",
            "value": "30"
        }
    ]
};
​
const chartConfigs = {
  type: 'column2d',
  width: 600,
  height: 400,
  dataFormat: 'json',
  dataSource: myDataSource,
};
​
class Chart extends Component {
  // Convert the chart to a 2D Pie chart after 5 secs.
  alterChart(chart) {
    setTimeout(() => {
      chart.chartType('pie2d');
    }, 5000);
  }
​
  render() {
    return (
      <div>
        <ReactFC {...chartConfigs} onRender={alterChart} />
      </div>
    );
  }
}
​
ReactDOM.render(
  <Chart />,
  document.getElementById('root'),
);

Usage and integration of FusionTime

From fusioncharts@3.13.3-sr.1 and react-fusioncharts@3.0.0, You can visualize timeseries data easily on react.

Consider the example below for integration of FusionTime

import React from 'react';
import FusionCharts from 'fusioncharts';
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
import ReactFC from '../lib/ReactFC';

ReactFC.fcRoot(FusionCharts, TimeSeries);

const jsonify = res => res.json();
const dataFetch = fetch(
  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/data.json'
).then(jsonify);
const schemaFetch = fetch(
  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/schema.json'
).then(jsonify);

class ChartViewer extends React.Component {
  constructor(props) {
    super(props);
    this.onFetchData = this.onFetchData.bind(this);
    this.state = {
      timeseriesDs: {
        type: 'timeseries',
        renderAt: 'container',
        width: '600',
        height: '400',
        dataSource: {
          caption: { text: 'Online Sales of a SuperStore in the US' },
          data: null,
          yAxis: [
            {
              plot: [
                {
                  value: 'Sales ($)'
                }
              ]
            }
          ]
        }
      }
    };
  }

  componentDidMount() {
    this.onFetchData();
  }

  onFetchData() {
    Promise.all([dataFetch, schemaFetch]).then(res => {
      const data = res[0];
      const schema = res[1];
      const fusionTable = new FusionCharts.DataStore().createDataTable(
        data,
        schema
      );
      const timeseriesDs = Object.assign({}, this.state.timeseriesDs);
      timeseriesDs.dataSource.data = fusionTable;
      this.setState({
        timeseriesDs
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.timeseriesDs.dataSource.data ? (
          <ReactFC {...this.state.timeseriesDs} />
        ) : (
          'loading'
        )}
      </div>
    );
  }
}
 
import React from 'react';
import FusionCharts from 'fusioncharts';
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
import ReactFC from '../lib/ReactFC';
​
ReactFC.fcRoot(FusionCharts, TimeSeries);
​
const jsonify = res => res.json();
const dataFetch = fetch(
  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/data.json'
).then(jsonify);
const schemaFetch = fetch(
  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/schema.json'
).then(jsonify);
​
class ChartViewer extends React.Component {
  constructor(props) {
    super(props);
    this.onFetchData = this.onFetchData.bind(this);
    this.state = {
      timeseriesDs: {
        type: 'timeseries',
        renderAt: 'container',
        width: '600',
        height: '400',
        dataSource: {
          caption: { text: 'Online Sales of a SuperStore in the US' },
          data: null,
          yAxis: [
            {
              plot: [
                {
                  value: 'Sales ($)'
                }
              ]
            }
          ]
        }
      }
    };
  }
​
  componentDidMount() {
    this.onFetchData();
  }
​
  onFetchData() {
    Promise.all([dataFetch, schemaFetch]).then(res => {
      const data = res[0];
      const schema = res[1];
      const fusionTable = new FusionCharts.DataStore().createDataTable(
        data,
        schema
      );
      const timeseriesDs = Object.assign({}, this.state.timeseriesDs);
      timeseriesDs.dataSource.data = fusionTable;
      this.setState({
        timeseriesDs
      });
    });
  }
​
  render() {
    return (
      <div>
        {this.state.timeseriesDs.dataSource.data ? (
          <ReactFC {...this.state.timeseriesDs} />
        ) : (
          'loading'
        )}
      </div>
    );
  }
}

Support

GitHub Issues | Contact FusionCharts Support

Licensing

React-FusionCharts module is licensed under open-source, distributed under the terms of the MIT/X11 License. You will still need to include FusionCharts in your page, as this project provides no direct functionality. You can download a free evaluation version here. To use in a commercial environment, please purchase a FusionCharts license.