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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create Flutter master-detail chart using the cartesian charts widget (SfCartesianChart) ?

Platform: Flutter |
Control: SfCartesianChart

In this article, we explained how to create the flutter master-detail chart using the SfRangeSelector widget for viewing the required data of the SfCartesianChart widget.


The master-detail chart is the chart with the huge amount of data, and in which the range selector navigator is used for viewing the specified or required data. You can achieve this using the Syncfusion_flutter_sliders and Syncfusion_flutter_charts packages.

Follow these steps to render the master-detail chart with the range selector:

Step 1: Declare the data source namely, splineAreaSeriesData, splineData, and rangeController of type RangeController, which is used to bind the SfRangeSelector and the SfCartesianChart. And minimum and maximum of type DateTime, which is used to set as minimum and maximum value for the rangeController, respectively. Finally, declare the splineAreaChart and splineChart of type SfCartesianChart.

final DateTime min = DateTime(2017, 01, 01), max = DateTime(2018, 01, 01);
late RangeController rangeController;
late SfCartesianChart splineAreaChart, splineChart;
List<ChartSampleData> splineAreaSeriesData, splineData;


Step 2: Initialize the start and end value for rangeController in the initState method and initialize the splineAreaSeriesData data source, which is the main chart of huge amount of data and splineData is used as the child of SfRangeSelector.

void initState() {
 rangeController = RangeController(
 start: DateTime.fromMillisecondsSinceEpoch(1498608000000),
 end: DateTime.fromMillisecondsSinceEpoch(1508112000000),
//Initialize the splineAreaSeriesData
    ChartSampleData(x: DateTime(2000, 01, 01, 0), y: 100),
    ChartSampleData(x: DateTime(2000, 01, 15), y: 10),
    ChartSampleData(x: DateTime(2000, 02, 01), y: 40),
    ChartSampleData(x: DateTime(2000, 02, 15), y: 34),
    ChartSampleData(x: DateTime(2000, 03, 01), y: 80),
    ChartSampleData(x: DateTime(2000, 03, 15), y: 49),
//Initialize the data with the huge amount in order to view using SfRangeSelector.
      x: DateTime.fromMillisecondsSinceEpoch(1483315200000), y: 0.9557),
      x: DateTime.fromMillisecondsSinceEpoch(1483401600000), y: 0.963),
      x: DateTime.fromMillisecondsSinceEpoch(1483488000000), y: 0.9582),
      x: DateTime.fromMillisecondsSinceEpoch(1483574400000), y: 0.9524),
      x: DateTime.fromMillisecondsSinceEpoch(1483660800000), y: 0.9445),


Step 3: Initialize the SfCartesianChart for splineAreaChart.

splineAreaChart = SfCartesianChart(
     // Assigning the maximum value as max value.
     DateTimeAxis(isVisible: false, maximum: DateTime(2018, 1, 1)),
   primaryYAxis: NumericAxis(isVisible: false),
   series: <SplineAreaSeries<ChartSampleData, DateTime>>[
     SplineAreaSeries<ChartSampleData, DateTime>(
       dataSource: splineSeriesData,
       //Binding xValueMapper.
       xValueMapper: (ChartSampleData sales, _) => sales.x,
       //Binding yValueMapper.
       yValueMapper: (ChartSampleData sales, _) => sales.y,


Step 4: Initialize the SfCartesianChart for the main splineChart with the minimum and maximum values and assign the rangeController to the rangeController property of the primaryXAxis.

splineChart = SfCartesianChart(
  primaryXAxis: DateTimeAxis(
    //Set the minimum and maximum value of the axis
    minimum: DateTime.fromMillisecondsSinceEpoch(1498608000000),
    maximum: DateTime.fromMillisecondsSinceEpoch(1508112000000),
     // Assigning the rangeController
    rangeController: rangeController
   series: <SplineSeries<ChartSampleData, DateTime>>[
    SplineSeries<ChartSampleData, DateTime>(
      dataSource: splineSeriesData,
       // Binding xValueMapper
       xValueMapper: (ChartSampleData sales, _) => sales.x,
       // Binding yValueMapper
       yValueMapper: (ChartSampleData sales, _) => sales.y,


Step 5: Finally, initialize the SfRangeSelector, in which assign the min and max values to the min and max properties and assign the rangeController to the controller property, and child as our splineAreaChart.

  min: min,
  max: max,
  controller: rangeController, 
  child: Container(
    child: splineAreaChart ,


Thus, the SfCartesianChart of type spline chart is rendered with the huge amount of data and SfRangeSelector to view the view port data alone.






View the sample in GitHub.


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