Quick Start: Building Your First Chart with FusionCharts FreeFusionCharts Free is a lightweight version of the popular FusionCharts library that lets you create attractive, interactive charts with minimal setup. This guide walks you through installing FusionCharts Free, creating your first chart, customizing its appearance, and deploying it in a simple web page. By the end you’ll have a working chart and the knowledge to expand it for dashboards or reports.
What you’ll need
- A modern web browser (Chrome, Firefox, Edge, Safari)
- A basic text editor (VS Code, Sublime Text, Notepad++)
- A simple local web server (optional but recommended for AJAX/data files) — e.g., Live Server extension in VS Code or python -m http.server
1. Installing FusionCharts Free
FusionCharts Free can be used by including the library files directly from a CDN or by downloading them and serving them locally. For a quick start, using the CDN is simplest.
Add these tags to your HTML head (replace with the latest version if needed):
<!-- FusionCharts core --> <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script> <!-- A theme (optional) --> <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script> If you prefer local files, download the FusionCharts Free package from the FusionCharts site or GitHub and reference the JS files from your project folder.
2. Basic HTML structure
Create an HTML file (index.html) with a container element for the chart:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>FusionCharts Free — First Chart</title> <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script> <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script> </head> <body> <div id="chart-container">Chart will render here</div> <script src="app.js"></script> </body> </html> The chart container can be any element (div, section); size can be controlled via CSS.
3. Creating your first chart (app.js)
FusionCharts uses a JavaScript object to define chart type, data, and options. Below is a simple example building a column chart showing monthly sales.
// app.js document.addEventListener('DOMContentLoaded', function () { const chartData = { chart: { caption: "Monthly Sales", subCaption: "Last 6 months", xAxisName: "Month", yAxisName: "Revenue (USD)", theme: "fusion" }, data: [ { label: "April", value: "42000" }, { label: "May", value: "81000" }, { label: "June", value: "72000" }, { label: "July", value: "55000" }, { label: "August", value: "91000" }, { label: "September", value: "51000" } ] }; FusionCharts.ready(function () { var fusioncharts = new FusionCharts({ type: "column2d", renderAt: "chart-container", width: "700", height: "400", dataFormat: "json", dataSource: chartData }); fusioncharts.render(); }); }); Place app.js in the same folder and open index.html in a browser (or use a local server). You should see an interactive column chart.
4. Customizing the chart
FusionCharts allows many customizations via chart attributes and data point-level settings.
Examples:
- Change colors: set palette colors in the chart object with paletteColors.
- Format numbers: use formatNumber and numberSuffix.
- Add tooltips and data labels: set showValues, plotToolText.
- Enable export: set exportEnabled and exportFormats.
Example attributes snippet:
chart: { caption: "Monthly Sales", theme: "fusion", paletteColors: "#5A8DEE,#2EC551,#FF8A65", showValues: "1", numberSuffix: " USD", exportEnabled: "1", plotToolText: "<b>$label</b>: $value USD" } 5. Loading data from JSON or CSV (AJAX)
Instead of hardcoding data, load remote JSON. Example using fetch:
fetch('data/sales.json') .then(res => res.json()) .then(data => { const chartCfg = { chart: { caption: "Monthly Sales", theme: "fusion" }, data: data }; new FusionCharts({ type: "column2d", renderAt: "chart-container", width: "700", height: "400", dataFormat: "json", dataSource: chartCfg }).render(); }); sales.json should be an array of objects with label/value:
[ { "label": "April", "value": "42000" }, { "label": "May", "value": "81000" } ] If loading locally, serve via a local web server to avoid CORS/file access issues.
6. Using different chart types
FusionCharts Free supports multiple chart types like line, area, pie, bar. To switch, change the type value:
- column2d — basic column chart
- line — simple line chart
- pie2d — 2D pie chart
- bar2d — horizontal bar chart
Example: type: “pie2d” with matching data fields (label, value).
7. Responsive behavior and sizing
For responsive charts use width: “100%” and a fixed height (or set both to percentages with parent container sized via CSS). Example CSS:
#chart-container { width: 100%; max-width: 900px; margin: 0 auto; } Then in FusionCharts config set width: “100%” and height: “400”.
8. Exporting charts (images/PDF)
Enable exporting via the chart attribute exportEnabled: “1”. The export button will appear, letting users download PNG/JPEG/PDF/SVG (depending on configuration). For advanced server-side export you can use FusionExport or FusionCharts export APIs.
9. Common pitfalls & debugging
- Nothing renders: ensure FusionCharts script is loaded and renderAt matches element id.
- CORS/local JSON: serve files over HTTP instead of file://.
- Wrong data format: FusionCharts expects data array for many chart types; check console for errors.
- Version mismatch: ensure theme script matches core FusionCharts version.
10. Next steps and resources
- Try combining multiple series (multi-series charts) for comparisons.
- Explore drill-down and linked charts for interactive dashboards.
- Use FusionCharts documentation and samples for advanced features (annotations, trendlines, gauges).
Example final HTML + JS (self-contained):
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>FusionCharts Free — First Chart</title> <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script> <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script> <style> #chart-container { width: 100%; max-width: 900px; margin: 40px auto; } </style> </head> <body> <div id="chart-container">Chart will render here</div> <script> document.addEventListener('DOMContentLoaded', function () { const chartData = { chart: { caption: "Monthly Sales", subCaption: "Last 6 months", xAxisName: "Month", yAxisName: "Revenue (USD)", theme: "fusion", paletteColors: "#5A8DEE,#2EC551,#FF8A65", showValues: "1", numberSuffix: " USD" }, data: [ { label: "April", value: "42000" }, { label: "May", value: "81000" }, { label: "June", value: "72000" }, { label: "July", value: "55000" }, { label: "August", value: "91000" }, { label: "September", value: "51000" } ] }; FusionCharts.ready(function () { new FusionCharts({ type: "column2d", renderAt: "chart-container", width: "100%", height: "400", dataFormat: "json", dataSource: chartData }).render(); }); }); </script> </body> </html> If you want, I can add an example using a multi-series chart, show how to implement drill-down, or convert this example to React/Vue.
Leave a Reply