How to Separate Data on X-Axis in Flutter Cartesian Chart?

This article explains how to visually separate data points on the X-axis based on a fixed-point value in the Flutter Cartesian Chart {target=“_blank”}. By using the crossesAt , gradient, borderGradient, and plotBands properties, we create a clear distinction between values above and below the specified point. A dashed line is drawn at the fixed point, enhancing the visual separation, while color gradients illustrate the relationship between the values.

The following steps describe how to set this up in your Flutter project.

Step 1: Initialize the list _chartData which stores the data source. Then create the SfCartesianChart widget with the AreaSeries and assign the _chartData to the dataSource property and map the x, y values to xValueMapper, yValueMapper properties respectively.

Define a fixedPoint variable, which represents the Y-axis value you want to visually separate. Here, the fixedPoint will act as a visual separator, helping us distinguish between values above and below this line.

final double fixedPoint = 21;

@override
void initState() {
 _chartData = <ChartData>[
    ChartData(1, 22),
    ChartData(2, 25),
    ChartData(3, 30),
    ChartData(4, 32),
    ChartData(5, 10),
    ChartData(6, 15),
    ChartData(7, 20),
    ChartData(8, 28),
    ChartData(9, 20),
    ChartData(10, 18),
    ChartData(11, 10),
    ChartData(12, 12),
    ChartData(13, 15),
 ];
 super.initState();
}
 
@override
Widget build(BuildContext context) {
 return Scaffold(
   body: Center(
     child: SfCartesianChart(
       series: <CartesianSeries>[
         AreaSeries<ChartData, int>(
           dataSource: _chartData,
           xValueMapper: (ChartData data, int index) => data.x,
           yValueMapper: (ChartData data, int index) => data.y,
         ),
       ],
     ),
   ),
 );
}

class ChartData {
 final int x;
 final double y;
 ChartData(this.x, this.y);
} 

Step 2: Now, configure the X-axis to cross at the fixedPoint value on the Y-axis. This makes the X-axis line up with our visual separator, enhancing readability.

SfCartesianChart(
  primaryXAxis: NumericAxis(
     placeLabelsNearAxisLine: false,
     crossesAt: fixedPoint,
     rangePadding: ChartRangePadding.additional,
  ),
  ...
),

Here’s what each setting does:

Place Labels Near Axis Line: false keeps the labels a bit away from the axis line to improve readability.
crossesAt : aligns the X-axis with the fixedPoint, creating a baseline for our separation.
rangePadding : adds space around the data points, so the axis doesn’t cut them off.

Step 3: To create a clear visual line at the fixedPoint, we’ll add a dashed line using a PlotBand on the Y-axis. This line will highlight the fixed Y-axis value. PlotBand draws a dashed line at the fixedPoint, creating a green boundary that separates values above and below.

SfCartesianChart(
  primaryYAxis: NumericAxis(
    opposedPosition: true,
    plotBands: [
      PlotBand(
        start: fixedPoint,
        end: fixedPoint,
        dashArray: const [4, 4],
        borderColor: Colors.green,
        borderWidth: 2,
      )
    ],
  ),
 ...
),

Here’s what each setting does:

OpposedPosition: true moves the Y-axis labels to the opposite side, making the chart look cleaner.

Step 4: Next, use gradient and borderGradient to apply different colors above and below the fixedPoint. This will make it easy to identify values relative to the fixed point, with red below and green above.

SfCartesianChart(
...         
 series: <CartesianSeries>[
   AreaSeries<ChartData, int>(
     dataSource: _chartData,
     xValueMapper: (ChartData data, int index) => data.x,
     yValueMapper: (ChartData data, int index) => data.y,
     borderDrawMode: BorderDrawMode.excludeBottom,
     borderGradient: const LinearGradient(
       colors: [
         Colors.red,
         Colors.red,
         Colors.green,
         Colors.green,
       ],
       stops: [0.0, 0.5, 0.5, 1.0],
       begin: Alignment.bottomCenter,
       end: Alignment.topCenter,
     ),
     gradient: LinearGradient(
       colors: [
         Colors.red.withOpacity(0.5),
         Colors.red.withOpacity(0.1),
         Colors.green.withOpacity(0.1),
         Colors.green.withOpacity(0.5),
       ],
       stops: const [0.0, 0.5, 0.5, 1.0],
       begin: Alignment.bottomCenter,
       end: Alignment.topCenter,
     ),
   ),
 ],
),

Here’s what each setting does:

BorderDrawMode: BorderDrawMode.excludeBottom hides the bottom border of the area series for a neat look.

borderGradient and gradient apply a red-to-green color transition:

Red shades are applied to values below the fixedPoint.
Green shades are applied to values above, making the transition easy to spot.

By following these steps, you’ve created a Flutter chart that visually separates data points based on a fixed Y-axis value. This approach helps users quickly interpret which values are above or below a certain point on the Y-axis.