Mapping chart marker color depending on some value on my custom chart data object

[Marco]

Hello! Im trying to build markers depending on a variable of my chart data object, and based on that change the color of the marker.

The ideal case would be something like the tooltip builder, which gives you access to the variable "data" which is the custom

class used to map values on the chart.

builder: (data, point, series, pointIndex, seriesIndex) {

     return X;

}

on the other hand the callback onMarkerRenderer only gives you arguments from the already in use variables

from the markers, which in this particular case is not that useful.

onMarkerRender: (MarkerRenderArgs args) {

        if (args. == 1) {

          final ChartDataDateTime chartDate = data;

          args.color = Colors.red;

          args.markerHeight = 20;

          args.markerWidth = 20;

          args.shape = DataMarkerType.diamond;

          args.borderColor = Colors.green;

          args.borderWidth = 2;

        }

      },

One solution i thought of was to use a color mapper, but spline series dont have color mappers for markers

as scatter series do.

Is there a workaround this problem?

[Sriram Kiran Senthilkumar]

Hi Marco, 

  

Greetings from Syncfusion. We have analyzed your scenario with the provided information and in order to map color for the series marker based on the value of the chart data object, you can use the pointIndex and seriesIndex arguments of the onMarkerRender event available in the chart. To illustrate this, we have created a simple chart sample in which we have stored the chart data source in a separate list object and with the help of onMarkerRender event’s pointIndex argument, we have checked and mapped the marker color only for the chart data points whose y-value is greater than ‘60’. Please check the code snippet below for further reference. 

SfCartesianChart( 

            onMarkerRender: (args) { 

              // we have checked and mapped the marker color for the chartData values whose y-value is  

              // greater than 60 

              if (chartData[args.pointIndex].y > 60) { 

                args.color = Colors.red; 

                args.markerHeight = 20; 

                args.markerWidth = 20; 

                args.shape = DataMarkerType.diamond; 

                args.borderColor = Colors.green; 

                args.borderWidth = 2; 

              } 

            }, 

            series: <ChartSeries<ChartData, String>>[ 

              LineSeries<ChartData, String>( 

                  dataSource: chartData, 

                  xValueMapper: (ChartData data, _) => data.x, 

                  yValueMapper: (ChartData data, _) => data.y, 

                  markerSettings: MarkerSettings(isVisible: true), 

                  // your configurations 

              ), 

            ] 

) 

 

Screenshot:  

  

 

The sample for reference can be found below. 

https://www.syncfusion.com/downloads/support/forum/160589/ze/f160589_sample-1245290869 

  

Please check with the above attached sample and revert us if you still have further concerns on this. 

  

Regards, 

Sriram Kiran