Articles in this section
Category / Section

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
                )
              ]
           ),

 

Screenshot

 

Light Theme

light theme

 

Dark Theme

dark theme

 

 

View the sample in GitHub

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied