SplineAreaSeries vertical and horizatal shaders

Question

I have implemented a gradient effect from top to bottom. How to add gradient colors between different values on the x-axis

  SplineAreaSeries<TacticChartData, DateTime>(
    dataSource: chartData,
    name: 'xx',
    xValueMapper: (tacticChartData, _) => tacticChartData.dateTime,
    yValueMapper: (tacticChartData, _) => tacticChartData.zfzdf100,
    borderColor: C.blue_0066FF,
    borderWidth: 1,
    onCreateShader: (details) {
      return ui.Gradient.linear(details.rect.topCenter, details.rect.bottomCenter, [
        C.blue_0066FF.withOpacity(0.4),
        C.blue_0066FF.withOpacity(0.01),
      ]);
    },
    splineType: SplineType.cardinal,
    cardinalSplineTension: 0,
    animationDuration: 0,
  ),
];

Lokesh Palani · Answer

Hi Zerong,Currently, we do not have support to display different gradient colors between the SplineAreaSeries. However, we have prepared workaround sample for your requirement. You can achieve your outcome by displaying the two SplineAreaSeries in the SfCartesianChart. You can apply the gradient effect from top to bottom by using the gradient property in the SplineAreaSeries. To display the gradient color between the SplineAreaSeries, you can add another SplineAreaSeries in the SfCartesianChart. You can display the second SplineAreaSeries using the first SplineAreaSeries dataSource range from 24 to 28. We have shared code snippet, screenshot, user guide documentation link, and sample for your reference. Please let us know if you require any further assistance.UG Link for SplineAreaSeries: https://help.syncfusion.com/flutter/cartesian-charts/chart-types/spline-area-chart UG Link for gradient: https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill Code Snippet: List chartDataOne = List.generate( 30, (index) => ChartSampleData( x: index + 1, yValue: 70 + Random().nextDouble() * 20, ), ); List getChartDataTwo() { return chartDataOne .where((data) => data.x! >= 24 && data.x! <= 28) .toList(); } List chartDataTwo = getChartDataTwo(); series: >[ SplineAreaSeries( dataSource: chartDataOne, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.yValue, borderColor: Colors.blue, borderWidth: 3, animationDuration: 0, splineType: SplineType.cardinal, gradient: LinearGradient( colors: [ Colors.white, Colors.blue.withOpacity(0.1), ], begin: Alignment.bottomCenter, end: Alignment.topCenter, stops: const [ 0.15, 0.99999999, ], ), ), SplineAreaSeries( dataSource: chartDataTwo, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.yValue, borderColor: Colors.red, borderWidth: 3, animationDuration: 0, splineType: SplineType.cardinal, gradient: LinearGradient( colors: [ Colors.white, Colors.red.withOpacity(0.5), ], begin: Alignment.bottomCenter, end: Alignment.topCenter, stops: const [ 0.15, 0.99999999, ], ), ), ], Screenshot:Regards,Lokesh P.Attachment: splineareaseries_gradient_45f67de7_fc948985.zip

zerong jiang · Answer

thank you very much!

zerong jiang · Answer

another question,when dataLabel closing very much,dataLabel will not showing,I hope dataLabel will keep showing

Lokesh Palani · Answer

Hi Zerong,We would like to inform you that when the data labels intersect with each other, the intersecting data labels will be hidden. If you still want to show the data labels when intersecting, we suggest that you set labelIntersectAction to LabelIntersectAction.none in the DataLabelSettings. While doing so, there are possibilities of intersecting nearby data labels.Currently, we don't have support to shift and position the intersecting data labels smartly. We have already logged a feature request for shift and position the intersecting data labels smartly in our feedback portal, and it is uncertain. This feature will be available in one of our upcoming releases. We will notify you when this feature is implemented. We appreciate your patience until then. If you have any additional specifications or suggestions for this feature request, please feel free to leave them in the comments section of the feedback link. This will help us understand how you would like to use it and how we can improve it.FR Link: https://www.syncfusion.com/feedback/37565Regards,Lokesh P.