Marker Mapper for Line chart in flutter

765 Views Asked by At

I'm using SFCartesianChart with LineSeries. I want some points to have a marker and others to not have a marker. I can't see documentation nor any property for this purpose. Is it impossible with SFCharts? If so are there any other way?

SfCartesianChart(
  primaryXAxis: CategoryAxis(),
  series: <LineSeries<ProductivityMapData, String>>[
  LineSeries<ProductivityMapData, String>(
    markerSettings: MarkerSettings(isVisible: true, shape: DataMarkerType.invertedTriangle),
    dataSource: productivityData.reversed.toList(),
    xValueMapper: (ProductivityMapData sales, _) => DateFormat('MM-dd').format(dFormat.parse(sales.day)),
    yValueMapper: (ProductivityMapData sales, _) => sales.productivity,
    dataLabelMapper: (ProductivityMapData sales, _) => sales.productivity.toStringAsFixed(1) + "%",
    dataLabelSettings: DataLabelSettings(overflowMode: OverflowMode.hide, showZeroValue: false, isVisible: true),
    onPointTap: (ChartPointDetails point){
      
    },
    pointColorMapper: (ProductivityMapData sales, _)=> (User.journalExists(dFormat.parse(sales.day)) ? Colors.lightGreenAccent : Colors.green)
  )
])

This is my current code. I want to toggle the marker like I change pointColor using pointColorMapper.

Thanks in advance for any help!

1

There are 1 best solutions below

0
On

I know it's too late now but if anyone need this, you can implement with onMarkerRender :

        SfCartesianChart(
            onMarkerRender: (args) {
              final yourChartData = chartData[args.pointIndex!];
              
              // Check your specific condition
              if (yourChartData.value > 99) {
                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 
              ),
            ]
        )