Getting started with Highcharts Flutter

Highcharts Flutter provides a robust set of widgets for an seamless integration of charts directly into your Flutter app. This allows you to create rich and engaging data visualizations for mobile and web.

Requirements

Highcharts Flutter relies on specific SDK features, so ensure you have the following:

Dart: Version 3.3.0 or later. This ensures compatibility with the latest language features and improvements.
Flutter: Version 1.17.0 or later. This is the minimum Flutter version required for the package to function correctly.
Web Package: If you’re targeting web, ensure the web package is correctly configured in your Flutter project. This is essential for web deployments.
Webview Packages: Highcharts Flutter leverages webviews to render the charts. Depending on your target platforms (Android, iOS, Web), you might need to install and configure platform-specific webview packages. Depending on your build targets, you will need one or more webview_flutter packages.

Installation

Create a Flutter Project (if you don’t have one): If you’re starting from scratch, follow the official Flutter documentation to create a new project. This sets up the basic structure for your Flutter app. See the official documentation for details.
Install Highcharts Flutter: Open your terminal in your Flutter project’s root directory and run the following command:
```
flutter pub add highcharts_flutter
```
This command fetches the highcharts_flutter package from pub.dev and adds it to your project’s dependencies.
Import the Package: In your Dart code where you want to use Highcharts, add the following import statement:
```
import 'package:highcharts_flutter/highcharts.dart';
```
This makes the Highcharts Flutter widgets available in your code.

Example

After the installation you can start using HighchartsChart widget and all available chart options. This example showcases a simple line chart as a starting point for using Highcharts to visualize data within your Flutter projects.


import 'package:flutter/material.dart';
import 'package:highcharts_flutter/highcharts.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello, Highcharts!',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: ListView(
          children: [
            // Here is a Highcharts widget added to the ListView
            HighchartsChart(
              HighchartsOptions(
                title: HighchartsTitleOptions(
                  text: 'Hello, Flutter!'
                ),
                series: [
                  HighchartsLineSeries(
                    name: 'My First Series',
                    data: [[0, 5], [0.5, 55.5], [1, 10]],
                    options: HighchartsLineSeriesOptions(
                      color: '#C60'
                    )
                  )
                ]
              )
            )
          ],
        ),
      )
    );
  }
}