FusionCharts SDK Updates: Angular, Svelte, React Native, and Flutter

We released updated FusionCharts SDKs for Angular, Svelte, React Native, and Flutter to support newer framework versions. These updates also address critical and high-severity vulnerabilities identified in the SDKs.

These releases update the framework-specific wrappers, not the core library. The updated SDKs make it easier to use FusionCharts with the current versions of these frameworks.

What’s Updated?

The updated FusionCharts SDKs support the newer versions of their respective frameworks, as shown in the table below:

You can upgrade to the corresponding FusionCharts SDK when building with one of these supported framework versions to get the updated compatibility and security improvements.

What’s New for Each SDK?

The SDK updates bring each FusionCharts integration up to date with newer framework versions. If you’re upgrading an existing application, here are the main changes and implementation details to know.

Angular FusionCharts 5.0.0

angular-fusioncharts 5.x supports Angular 20, 21, and 22 and has been validated with FusionCharts 4.2.2. Applications using Angular 19 or earlier should remain on angular-fusioncharts 4.x.

Version 5 is primarily a packaging-level update. The existing <fusioncharts> component API, inputs, outputs, and fcRoot setup remain unchanged. In v5, the package uses Angular Package Format with partial-Ivy/FESM2022 and ESM-only modules. fusioncharts is now listed as a peer dependency.

Install the wrapper and FusionCharts together:

npm install angular-fusioncharts fusioncharts

For a standalone Angular application, register FusionCharts once and import FusionChartsModule into the component:

import { Component } from '@angular/core';
import { FusionChartsModule } from 'angular-fusioncharts';

import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FusionChartsModule],
  template: `
    <fusioncharts
      type="column2d"
      width="600"
      height="400"
      dataFormat="json"
      [dataSource]="dataSource">
    </fusioncharts>
  `
})
export class App {
  dataSource = {
    chart: {
      caption: 'Quarterly Revenue',
      theme: 'fusion'
    },
    data: [
      { label: 'Q1', value: '120' },
      { label: 'Q2', value: '150' },
      { label: 'Q3', value: '170' }
    ]
  };
}

Upgrading from v4? Your component code generally does not need to change. However, remove @types/fusioncharts from package.json, as TypeScript types now ship with the package. Applications that directly loaded the old UMD bundle also need to switch to standard package imports.

Svelte FusionCharts 2.0.0

svelte-fusioncharts 2.0.0 supports both Svelte 4 and Svelte 5. The package ships its .svelte source and lets your application’s Svelte toolchain compile it, allowing the same package to work across both supported Svelte versions.

Install the wrapper alongside FusionCharts:

npm install svelte-fusioncharts fusioncharts

A basic implementation looks like this:

<script>
  import FusionCharts from 'fusioncharts';
  import Charts from 'fusioncharts/fusioncharts.charts';
  import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
  import SvelteFC, { fcRoot } from 'svelte-fusioncharts';

  fcRoot(FusionCharts, Charts, FusionTheme);

  const chartConfigs = {
    type: 'column2d',
    width: 600,
    height: 400,
    dataFormat: 'json',
    dataSource: {
      chart: {
        caption: 'Quarterly Revenue',
        theme: 'fusion'
      },
      data: [
        { label: 'Q1', value: '120' },
        { label: 'Q2', value: '150' },
        { label: 'Q3', value: '170' }
      ]
    }
  };
</script>

<SvelteFC {...chartConfigs} />

Using SvelteKit? FusionCharts requires a browser DOM and should not be imported during server-side rendering. For a chart-only route or dashboard, you can disable SSR for that route:

// +page.js
export const ssr = false;

If the rest of the page needs SSR, load the chart component on the client instead.

React Native FusionCharts 7.0.0

react-native-fusioncharts 7.0.0 supports React Native 0.75 through 0.87 and the corresponding React 18 and React 19 versions. It also supports Expo SDK 51–57 through development builds.

Install the wrapper and its native dependencies:

npm install react-native-fusioncharts@7.0.0 \
  @dr.pogodin/react-native-fs@2.40.0 \
  @notifee/react-native@^9.1.8 \
  @react-native-camera-roll/camera-roll@^7.10.2 \
  react-native-share@^12.3.1 \
  react-native-webview@^14.0.1

Then configure the chart and pass it to the ReactNativeFusionCharts component:

import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import ReactNativeFusionCharts from 'react-native-fusioncharts';

function App() {
  const chartConfig = {
    type: 'column2d',
    width: '100%',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      chart: {
        caption: 'Quarterly Revenue',
        xAxisName: 'Quarter',
        yAxisName: 'Revenue',
        theme: 'fusion',
      },
      data: [
        {label: 'Q1', value: '120'},
        {label: 'Q2', value: '150'},
        {label: 'Q3', value: '170'},
      ],
    },
  };

  return (
    <SafeAreaView style={styles.container}>
      <ReactNativeFusionCharts chartConfig={chartConfig} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});

export default App;

For iOS projects, install the CocoaPods dependencies after adding the native packages. On Android, API 24 is the minimum supported version because of the WebView dependency. If you’re using Expo, you’ll need an Expo development build because the wrapper uses native modules and does not run in Expo Go.

Flutter FusionCharts 2.0.0

flutter_fusioncharts 2.0.0 supports Flutter 3.3.8 and above on Android. For iOS development, the documented minimum is Flutter 3.7.12 with Dart 2.19.6 or later.

Add the updated package to your project:

flutter pub add flutter_fusioncharts:^2.0.0

Alternatively, add it directly to pubspec.yaml:

dependencies:
  flutter_fusioncharts: ^2.0.0

Then run flutter pub get if you added the dependency manually.

You can render a chart using the FusionCharts widget:

import 'package:flutter/material.dart';
import 'package:flutter_fusioncharts/flutter_fusioncharts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FusionCharts Flutter Demo'),
        ),
        body: Center(
          child: FusionCharts(
            type: 'column2d',
            dataSource: const <String, dynamic>{
              'chart': <String, dynamic>{
                'caption': 'Quarterly Revenue',
                'theme': 'fusion',
              },
              'data': <Map<String, String>>[
                {'label': 'Q1', 'value': '120'},
                {'label': 'Q2', 'value': '150'},
                {'label': 'Q3', 'value': '170'},
              ],
            },
          ),
        ),
      ),
    );
  }
}

Version 2 also simplifies the setup compared with 1.x. FusionCharts 4.2.2 is bundled with the package. So you no longer need to download the FusionCharts JavaScript files separately or add them as Flutter assets. The release also replaces the previous flutter_inappwebview setup with webview_flutter, removing the old storage-permission and CDN configuration.

If you’re upgrading from flutter_fusioncharts 1.x, review the new setup before migrating, as some of the previous installation and configuration steps are no longer required.

What These SDK Updates Mean for Developers

These SDK updates primarily provide compatibility with the latest framework versions and improved security. If you work on applications on newer versions of Angular, Svelte, React Native, or Flutter, the updated SDKs provide FusionCharts integration for those environments.

We addressed critical and high-severity vulnerabilities identified in the affected SDKs through these releases. If you use these SDKs, upgrade to their latest versions to ensure that you have these security fixes.

This is not a new FusionCharts core release. So this release includes no version update to the charting library itself or its existing functionality. We specifically focused on keeping the framework-specific SDKs current, compatible, and secure with these changes.

Get the Updated SDKs

The updated SDKs are now available through NPM and Pub.dev:

NPM

• angular-fusioncharts v5.0.0
• svelte-fusioncharts v2.0.0
• react-native-fusioncharts v7.0.0

Pub.dev

• flutter_fusioncharts v2.0.0

You can also find the source code and release information in the FusionCharts GitHub repositories for Angular, Svelte, React Native, and Flutter.

Upgrade and Start Building

If you’re using Angular, Svelte, React Native, or Flutter, check the updated SDK package and its GitHub repository for the latest installation and upgrade details. Moving to the latest SDK gives you support for the newly supported framework versions, along with the security fixes included in this release.

Remember that these are SDK updates only.