{"id":26897,"date":"2025-08-03T12:12:45","date_gmt":"2025-08-03T12:12:45","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=26897"},"modified":"2026-04-23T07:34:26","modified_gmt":"2026-04-23T07:34:26","slug":"highcharts-for-flutter-is-now-official","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/highcharts-for-flutter-is-now-official\/","title":{"rendered":"Highcharts for Flutter Is Now Official: Here’s How to Get Started"},"content":{"rendered":"

It\u2019s official. Highcharts for Flutter is out of beta and ready for production use.<\/p>\n

Flutter has become the go-to framework for building mobile apps that run on Android and iOS. And now, you can bring Highcharts into your Flutter projects using our official package without jumping through hoops or relying on community-maintained wrappers.<\/p>\n

Since launching the beta, we\u2019ve tightened up the integration, fixed bugs, and improved performance based on feedback from our community. (Check out the changelog<\/a> for the nitty-gritty.)<\/p>\n

If you tried the beta: welcome back. If you\u2019re new to Highcharts for Flutter: let\u2019s get you up and running.<\/p>\n

Installation<\/b><\/h2>\n

To add\u00a0highcharts_flutter<\/code> to your project, use the following Flutter command:<\/p>\n

flutter pub add highcharts_flutter<\/pre>\n
This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get<\/code>):<\/p>\n
dependencies:\r\n  highcharts_flutter: ^1.0.0\r\n<\/pre>\n
Then import it into your Dart code:<\/p>\n
import 'package:highcharts_flutter\/highcharts.dart';\r\n<\/code><\/pre>\n
Now all Highcharts options are available for you to use in your project. Check out the highcharts_flutter page on pub.dev<\/a> for the full list of options. (There are a lot.)<\/p>\n
Example: Hello, Highcharts<\/b><\/h2>\n
Here\u2019s a simple example that shows how to use Highcharts for Flutter to build a line chart in your app:<\/p>\n
\r\nimport 'package:flutter\/material.dart';\r\nimport 'package:highcharts_flutter\/highcharts.dart';\r\n\r\nvoid main() {\r\n  runApp(const MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n  const MyApp({super.key});\r\n\r\n  \/\/ This widget is the root of your application.\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return MaterialApp(\r\n      title: 'Hello, Highcharts!',\r\n      theme: ThemeData(\r\n        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),\r\n        useMaterial3: true,\r\n      ),\r\n      home: Scaffold(\r\n        appBar: AppBar(\r\n          backgroundColor: Theme.of(context).colorScheme.inversePrimary,\r\n          title: Text(widget.title),\r\n        ),\r\n        body: ListView(\r\n          children: [\r\n            \/\/ Here is a Highcharts widget added to the ListView\r\n            HighchartsChart(\r\n              HighchartsOptions(\r\n                title: HighchartsTitleOptions(\r\n                  text: 'Hello, Flutter!'\r\n                ),\r\n                series: [\r\n                  HighchartsLineSeries(\r\n                    name: 'My First Series',\r\n                    data: [[0, 5], [0.5, 55.5], [1, 10]],\r\n                    options: HighchartsLineSeriesOptions(\r\n                      color: '#C60',\r\n                    ),\r\n                  ),\r\n                ],\r\n                plotOptions: HighchartsPlotOptions(\r\n                  series: HighchartsSeriesOptions(\r\n                    point: HighchartsSeriesPointOptions(\r\n                      events: HighchartsSeriesPointEventsOptions(\r\n                        click: HighchartsCallback((args) => {\r\n                          final point = args[0];\r\n                          debugPrint('Point value: ${point['x']}, ${point['y']}');\r\n                        }),\r\n                      ),\r\n                    ),\r\n                  ),\r\n                ),\r\n              ),\r\n            ),\r\n          ],\r\n        ),\r\n      ),\r\n    );\r\n  }\r\n}<\/code><\/pre>\n
All chart options can be updated dynamically using HighchartsChart.refresh()<\/code>. This makes it easier to build interactive, responsive charts that behave like native parts of your Flutter app.<\/p>\n
Want More Charts?\u00a0<\/b><\/h2>\n
Flutter for Highcharts supports all major Highcharts products:<\/p>\n