Having trouble creating a Stripes-styled Linear Gauge

[Advitiay Anand]

Basically I'm trying to put ticks on top of ranges on top of axis (all vertically aligned).

I have managed to achieved the same. However, the ticks (major and minor alike) are totally hidden behind the ranges.

This totally spoils the desired design. Since what I want is similar looking white bars (ticks) on top of ranges of multiple colours. So the output would look like coloured stripes.

Kindly let me know what my options are. Or is it not possible?

[Praveen Gopalsamy]

Hi Advitiay Anand, 

Greetings from Syncfusion support. 

  

We had checked your query and found that you can achieve this requirement using the SfLinearGauge.markerPointers property. Create a list of LinearShapePointer which you want to show in the place of ticks and set it to the SfLinearGauge.markerPointers property. We had attached the code snippet for your reference.  

List<LinearShapePointer> _linearShapePointers; 

final double _min = 0.0; 

final double _max = 20.0; 

 

@override 

void initState() { 

  _linearShapePointers = []; 

  for (double i = _min; i <= _max;) { 

    _linearShapePointers.add(LinearShapePointer( 

      value: i, 

      color: Colors.blue, 

      width: 5, 

      height: 5, 

      enableAnimation: false, 

      shapeType: LinearShapePointerType.rectangle, 

      position: LinearElementPosition.cross, 

    )); 

    i += 2; 

  } 

  super.initState(); 

} 

 

@override 

Widget build(BuildContext context) { 

  return Scaffold( 

      body: SfLinearGauge( 

    minimum: _min, 

    maximum: _max, 

    interval: 4.0, 

    showTicks: false, 

    markerPointers: _linearShapePointers, 

    ranges: <LinearGaugeRange>[ 

      LinearGaugeRange( 

        startValue: _min, 

        endValue: _max, 

        position: LinearElementPosition.cross, 

      ), 

    ], 

  )); 

} 

 

 

Output: 

 

 

Please let us know if you need any further assistance in this. 

  

Regards, 

Praveen G. 

[Advitiay Anand]

Hi Praveen,

Thank you for the quick reply.

About the code, I was just able to find out the same on my own. Your code further clarifies the same.

Although I'm able to make a decent implementation of what was required, it's not exactly correct. So I'll ask how you would approach the following design: 

A Linear Gauge consisting of only stripes (colour based on the range where its value belongs), and just one of these stripes to be longer and centred (to mark the current value)

To repeat where I currently am, I'm using multiple ranges for the different colours. And I'm placing white Widget Markers over the ranges at equal intervals so that the coloured ranges appear as striped. This much is done.

But I also want to make one of these "coloured stripes" longer, and vertically-centred to mark the current value.

Now, it doesn't seem possible to me, since it is the white Widget Markers that we are placing on top of the ranges to give an illusion of separate coloured stripes. And I want to modify a coloured stripe that is actually just one range. So this approach seems like a dead end if I want a perfect design.

But perhaps you could shed some light. Thanks.

[Meikanda Nayanar]

Hi Advitiay, 

Thank you for your update. 

But still, we could not understand your requirement completely. So, we have just created an illustration image and attached it below for your reference. Can you please modify it for your requirement and send us back? This will be more helpful for us to help you further in this. 

 

 

 

We understood that you have achieved the above with our widget already and you are trying to do the below, which we find difficult to understand from our end. So, can you please elaborate this more with a possible image illustration or any reference links from the web? 

But I also want to make one of these "colored stripes" longer, and vertically centered to mark the current value. 

 

Please let us know if you need any further assistance in this. 

Thanks 

Meikandan 

[Advitiay Anand]

I'm extremely sorry for replying this late. I had completely forgotten about it. Your image above was accurate, and I did not try to further optimize my logic.

But you guys have been amazing. I appreciate your commitment very much. You may close this forum as per your wish.

[Lakshmi Radha Krishnan]

Hi Advitiay, 

Thanks for the update. 

We are glad that your reported query is resolved. Please let us know if you require any further assistance. 

 

Regards, 

Lakshmi R.