Is there a way to add markers to a hilo chart with syncfusion flutter?

Question

I want to have a HiLo graph in SyncFusion (with this Flutter plugin), that will look like this :

I can make a hilo chart - but I can't seem to get those white dots to appear - I expected the markerSettings property to do this but it hasn't.

HiloSeries<Stonk, DateTime>(
    markerSettings: MarkerSettings(
      isVisible: true,
      color: Colors.white,
    ),
    color: Colors.green,
    borderWidth: 10,
    xValueMapper: (Stonk stonk, _) => stonk.time,
    highValueMapper: (Stonk stonk, _) => stonk.high,
    lowValueMapper: (Stonk stonk, _) => stonk.low,
    dataSource: stonks,
  );

This is what I've tried but adding the markerSettings property does not make those white dots appear.

Is there a way to add "dot" markers to the top and bottom of the hilo bars?

Answer 1

As of now, we don’t have marker support for financial series, and we will provide marker support for hilo series in our upcoming vol 1 SP1 release. However, your requirement can be achieved using the range column series. Here you can enable the markers which can be added to the top and bottom of the bars. The code to achieve this scenario can be found below.

// Series configurations
 RangeColumnSeries<ChartData, double>(
    dataSource: chartData,
    markerSettings: MarkerSettings(isVisible: true),
    xValueMapper: (ChartData sales, _) => sales.x,
    highValueMapper: (ChartData sales, _) => sales.high,
    lowValueMapper: (ChartData sales, _) => sales.low,
    // Other configurations
  ),

Screenshot

The sample for reference can be found below.

Range column sample

Answer 2

Tried to help you out here but your right it doesn't work but I don't think it's something your doing something wrong docs are pretty straight forward and I had it in and empty project so no interference. Also I got it to work with an image. if you really need it you could find a picture of what you want as a work around. Sorry couldn't be more help.

HiloSeries<Offset, DateTime>(
                enableTooltip: true,
                markerSettings: MarkerSettings(
                    borderWidth: 8,
                    width: 10,
                    shape: DataMarkerType.image,
                    borderColor: Colors.black,
                    isVisible: true,
                    color: Colors.black,
                    height: 10,
                    image: Image.asset('assets/images/logo.png').image),
                color: Colors.green,
                borderWidth: 2,
                xValueMapper: (Offset stonk, _) => DateTime(stonk.dx.toInt()),
                highValueMapper: (Offset stonk, _) => stonk.dx,
                lowValueMapper: (Offset stonk, _) => stonk.dy,
                dataSource: [Offset(1, 2), Offset(2, 1), Offset(3, 4)],
              )

Also another thing that made me thing it's not something your doing wrong if you turn tooltips on then click on the bar it knows which icon you've selected which if you had something wrong I doubt it would