We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Flutter |
Control: SfCartesianChart |
Published Date: February 24, 2020 |
Last Revised Date: May 14, 2020

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

 

 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon