We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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 08:20 AM

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 05:27 AM

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 08:04 AM

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.
Live Chat Icon For mobile
Up arrow icon