How to render the Flutter Cartesian chart (SfCartesianChart) in dark theme?

2 mins read

Description

This article describes how to render the flutter charts in dark theme

Solution

In a Flutter application, you can use either a light theme or a dark theme. By default, Flutter apps render with a light theme, and consequently, our chart widget will also render with a light theme. The app's theme can be switched by setting the Brightness property to Brightness.dark. Based on this setting, the chart widget's appearance will automatically change to provide better readability in both themes. No additional API configuration is needed for rendering charts in dark theme.

Chart elements such as axis lines, axis labels, axis tick lines, axis gridlines, legend item text, chart title, tooltip, etc., will automatically adapt to the selected theme.

Step 1: Specify the dark theme in the material app.

@override
Widget build(BuildContext context){
  return MaterialApp(
     theme: ThemeData(
       brightness: Brightness.dark
     )
   );
}

Step 2: Initialize the Cartesian chart widget with the required parameters.

SfCartesianChart(
              primaryXAxis: CategoryAxis( ),
              series: <LineSeries<SalesData, String>>[
                LineSeries<SalesData, String>(
                    //Other configurations
                )
              ]
           ),