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 the flutter application, you can either have a light theme or a dark theme. By default, the flutter app will render with light theme. Hence our chart widget will also render with light theme. Theme of the app can be switched by setting values of the ‘Brightness’ property as 'darkTheme’. Based on this, the chart widget appearance will also be changed to provide better readability in both the themes. No need to set any other API for rendering the dark theme in the chart widget. It will be automatically changed based on the brightness value of the application.

Chart elements like axis line, axis labels, axis tick lines, axis gridlines, legend item text, chart title, and tooltip, etc., will be changed.

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: <ChartSeries<SalesData, String>>[
                LineSeries<SalesData, String>(
                    //Other configurations
                )
              ]
           ),