How to update area chart color and border color based on positive and negative values in Flutter Cartesian Chart?

This article explains how to render the area chart color and border color based on whether the data points are positive or negative. Using the onCreateShader property of the AreaSeries, we created a custom shader that dynamically changes the area color and border color for the area series.

The following steps outline how to update area chart color and border color based on positive and negative values in Flutter CartesianChart.

Step 1: Initialize the Data Source

First initialize the data source for the chart. The data source contains the sales data for each month, including both positive and negative values.

class SalesData {
  SalesData(this.year, this.sales);

  final String year;
  final double sales;
}

List<SalesData> data = [
  SalesData('Jan', 35),
  SalesData('Feb', 28),
  SalesData('Mar', 0),
  SalesData('Apr', -32),
  SalesData('May', -40)
];

Step 2: Create Area series

To initialize the AreaSeries, create an SfCartesianChart and define the primaryXAxis as CategoryAxis to categorize data points, such as year in this example. Then, add the AreaSeries inside the series property, specifying the dataSource, xValueMapper for the x-axis labels, and yValueMapper for plotting values. Customize the appearance with color and borderColor property in area series. This setup helps visualize data trends effectively.

SfCartesianChart(
  primaryXAxis: const CategoryAxis(),
  series: <CartesianSeries<SalesData, String>>[
    AreaSeries<SalesData, String>(
      dataSource: data,
      xValueMapper: (SalesData data, int index) => data.year,
      yValueMapper: (SalesData data, int index) => data.sales,
      color: Colors.green.withOpacity(0.3),
      borderColor: Colors.red,
    ),
  ],
)

Step 3: Customize the area color and border color based on positive and negative values

To dynamically update the area color based on whether data points are positive or negative, the onCreateShader property of the AreaSeries is used. This allows a custom gradient where green is applied to positive values and red to negative ones. Additionally, the onActualRangeChanged callback calculates the mid-value of the visible range, ensuring accurate color transitions by determining the split between positive and negative regions.

double midValue = 0;

SfCartesianChart(
  primaryXAxis: const CategoryAxis(),
  onActualRangeChanged: (ActualRangeChangedArgs rangeChangedArgs) {
    if (rangeChangedArgs.orientation == AxisOrientation.vertical) {
      midValue = rangeChangedArgs.visibleMax /
          (rangeChangedArgs.visibleMax.abs() +
              rangeChangedArgs.visibleMin.abs());
    }
  },
  series: <CartesianSeries<SalesData, String>>[
    AreaSeries<SalesData, String>(
      dataSource: data,
      xValueMapper: (SalesData data, int index) => data.year,
      yValueMapper: (SalesData data, int index) => data.sales,
      color: Colors.green.withOpacity(0.3),
      onCreateShader: (ShaderDetails details) {
        return ui.Gradient.linear(
          details.rect.topCenter,
          details.rect.bottomCenter,
          <Color>[
            Colors.green,
            Colors.green,
            Colors.red,
            Colors.red,
          ],
          <double>[
            0,
            midValue,
            midValue,
            0.99999,
          ],
        );
      },
      borderColor: Colors.red,
    ),
  ],
)

Final output:

View sample on GitHub

Conclusion

I hope you enjoyed learning about how to update area chart color and border color based on positive and negative values in Flutter Cartesian Chart.

You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!