render bar chart with rounded corner at right.

[Benjamin]

i am trying to render my chart with rounded corner at the side. but cant seems to get it to work.

 

dojo link

 

Expected result

[Yordan]

Hi Benjamin,

I believe I have successfully implemented the functionality you requested. Please review the provided Dojo and let me know if it meets your requirements.

The implementation includes modifications to the visual function logic, where I've optimized the approach to reuse the existing rect object while applying rounded corners to achieve the desired visual effect.

I welcome any feedback or suggestions for further refinement to ensure this solution fully addresses your needs.

Regards,
Yordan
Progress Telerik

[Benjamin]

hi. thx for the reply. would like to check if possible for the left side of the bar to remain sharp-edged. Only the right side has a rounded corner.

[Yordan]

Hello Benjamin,

 

It is indeed possible to apply rounded corners exclusively to the right side of chart elements. This functionality can be achieved through custom visual functions in the Kendo UI Chart component.

For comprehensive implementation guidance, please refer to our knowledge base article: Chart Rounded Bar Corners

I have prepared two distinct methodologies to accomplish this requirement:

• Path-based Approach - Utilizing custom drawing paths with selective arc definitions
• Overlay Technique - Combining rounded rectangles with strategic masking elements

Both implementation strategies have been demonstrated in the provided Dojo example for your evaluation. Please review the solution and confirm whether it aligns with your technical requirements.

Should you require any modifications or have additional specifications, please do not hesitate to reach out.

Regards,
Yordan
Progress Telerik

[Benjamin]

i saw that for the chart with 0 value, there seems to be overlapping

[Yordan]

Hello Benjamin,

To address the overlapping issue, consider adding a margin property within the labels configuration object. This approach provides better spacing control and visual separation. Please refer to the updated Dojo example below for implementation details.

Regards,
Yordan
Progress Telerik