SplineSeries line color gradient based on value

[Martin Pyk Pyk Pettersen]

Is it possible to have the SplineSeries line having a gradient color mapped to it based on the Y-axis value.

Let's say your Y-axis has a range from 0-100. When the line is within the 0-25 range its green, when its between 25-50 its yellow, when its between 50-75 its orange, and between 75-100 its red.

See attachment for an example of desired look.

Thanks

Attachment: chart_example_32c34020.zip

[Dharanidharan Dharmasivam]

Hi Martin, 

 

Greetings from Syncfusion. We have looked through your query. We can achieve the rendering of Spline series line with gradient colors which are mapped with Y-axis values by using the pointColorMapper property. We have achieved your requirement in the attached sample and provided the API reference, user guide links too. 

 

API: https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html 

UG: https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points 

Sample: spline_gradient_sample

 

Kindly go through it and get back to us if you require further assistance. 

 

Thanks, 

Dharani. 

[Rw Liebenberg]

Thank you for posting this solution, however the suggested solution does not give a gradient color from one point to the next, it only changes the spline color at a certain point.

Is there a way to draw the spline as a gradient from one plotted point to the next plotted point. IE:

x:0,y:0 starts at red

to

x:10,y:10 ends in green

and have the color lerp between red and green like this

Color.lerp(Colors.red, Colors.green);

[Yuvaraj Gajaraj]

Hi Rw,

We suspect you are looking to apply the gradient to the spline series, here we have an onCreateShader callback that helps you to apply the gradient to the spline series. We have attached the code snippet and sample for your requirement.

Code snippet:

onCreateShader: (ShaderDetails details) {

  return ui.Gradient.linear(

      details.rect.topCenter,

      details.rect.bottomCenter,

      const <Color>[Colors.red, Colors.green],

      <double>[0.5, 0.9]);

},

UG: https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncreateshader

If you have any further queries, please get back to us.

Regards,

Yuvaraj.

Attachment: spline_gradient_sample_5d206b4f.zip