Column Series Column top border

Hi, 
im trying to make a kind of "top border" look for a column. 
Like the one in the picture below.  
Any ideas off a way to achieve this ?

Have been trying various things with both onCreateRenderer (getStrokePaint) and onCreateShader. 
But havent really gotten anything close. 


column_top_border.PNG


3 Replies 1 reply marked as answer

SK Sriram Kiran Senthilkumar Syncfusion Team November 15, 2022 01:20 PM UTC

Hi Ole,


Currently, we are validating your query and will update the complete details in one business day.


Regards,

Sriram



OL Ole November 16, 2022 10:27 AM UTC

I have found a solution for this issue myself. 
Already had custom Painter for handleing different color borders in the chart. 
And was previously trying to get this to work with a gradient, but didnt get it quite right. 
However I found a way that gives the result i was looking for. 

In short I have an override on "getStrokePaint", where i add a gradient.CreateShader(),
where the Rect bottom is just a couple px lower than top. 
And using the gradient to draw the color. 

Something like this: 


 final gradient = LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [borderColor, Colors.transparent, Colors.transparent],
    stops: const [0.0, 0.9, 1],
  );


  final shortRect = Rect.fromLTRB(
    segmentRect.left,
    segmentRect.top,
    segmentRect.right,
    segmentRect.top + 2,
  );
  Paint()..shader =  gradient.createShader(shortRect);

Marked as answer

SK Sriram Kiran Senthilkumar Syncfusion Team November 16, 2022 01:04 PM UTC

Hi Ole,


We are glad that the problem is solved at your end, let us know if you need any other assistance.


Regards,

Sriram Kiran


Loader.
Up arrow icon