hi there. can anyone help me to build this kind of chat?

[mahdiqdi]

is it possible to help me to have this kind of chart?
area below first index should be red and above first index should be green

i can make a chart similar to this but gradient goes below chart when it is red

thanks for your help

[mahdiqdi]

this is my chart
everything is okay but gradient goes below my chart
i want to have this gradient above my chart when it is red

[mahdiqdi]

no help?

[YerikhoSt]

Hi bro, how do you add a background color to a line chart?

[mahdiqdi]

@YerikhoSt
you can use AreaChart & lineChart across eachOther

[PreethikaSelvam]

Hi All,

We have analyzed your query and achieve your requirement to visually separate data points on the X-axis based on a fixed-point value by using the crossesAt, gradient, and borderGradient. A dashed line has been drawn at this fixed point using a plotBand. We have configured the data points so that Y-axis values greater than the fixed point are rendered in green color (above the line), while points with Y-axis values less than the fixed point are rendered in red color (below the line). We have applied a color gradient transitions at the fixed point, achieved through the borderGradient and gradient settings, al-lowing the color change to accurately reflect the separation point. To control the border appearance, we set borderDrawMode to BorderDrawMode.excludeBottom, which applies the border gradient only to the sides and top of the area series. When adjusting the crossesAt value, the gradient stops will need to be recalibrated to ensure that the red-green transition aligns with the new fixed point.

We have shared a code snippet and sample for your reference. You can modify the sample as needed; however, please remember to adjust the gradient stop values when changing the data source or the crossesAt value accordingly.

Code snippet:

 final double fixedPoint = 21; // Define your fixed point on the Y-axis

  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      primaryXAxis: NumericAxis(
        placeLabelsNearAxisLine: false,
        crossesAt: fixedPoint,
        rangePadding: ChartRangePadding.additional,
      ),
      primaryYAxis: NumericAxis(
        opposedPosition: true,
        plotBands: [
          PlotBand(
            start: fixedPoint,
            end: fixedPoint,
            dashArray: const [4, 4],
            borderColor: Colors.green,
            borderWidth: 2,
          )
        ],
      ),
      series: <CartesianSeries>[
        AreaSeries<DataPoint, int>(
          dataSource: chartData(),
          xValueMapper: (DataPoint data, _) => data.x,
          yValueMapper: (DataPoint data, _) => data.y,
          borderDrawMode: BorderDrawMode.excludeBottom,
          borderGradient: const LinearGradient(
            colors: [
              Colors.red, // For values below fixed point
              Colors.red,
              Colors.green, // For values above fixed point
              Colors.green,
            ],
            stops: [
              0.0,
              0.5, // Adjust to place the red-green transition at the fixed point
              0.5,
              1.0,
            ],
            begin: Alignment.bottomCenter,
            end: Alignment.topCenter,
          ),
          gradient: LinearGradient(
            colors: [
              Colors.red.withOpacity(0.5), // For values below fixed point
              Colors.red.withOpacity(0.1),
              Colors.green.withOpacity(0.1), // For values above fixed point
              Colors.green.withOpacity(0.5),
            ],
            stops: const [
              0.0,
              0.5, // Adjust to place the red-green transition at the fixed point
              0.5,
              1.0,
            ],
            begin: Alignment.bottomCenter,
            end: Alignment.topCenter,
          ),
        ),
      ],
    );
  }

  List<DataPoint> chartData() {
    return [
      DataPoint(1, 22),
      DataPoint(2, 25),
      DataPoint(3, 30),
      DataPoint(4, 32),
      DataPoint(5, 10),
      DataPoint(6, 15),
      DataPoint(7, 20),
      DataPoint(8, 28),
      DataPoint(9, 20),
      DataPoint(10, 18),
      DataPoint(11, 10),
      DataPoint(12, 12),
      DataPoint(13, 15),
    ];
  }
}

// Define a class for data points
class DataPoint {
  final int x;
  final double y;

  DataPoint(this.x, this.y);
}

Output:

Please let us know if you need any further assistance.

Regards,
Preethika Selvam.
gh2037.zip

[mahdiqdi]

thanks for your help
it was perfect