Rank 1
Iron
Iron
For stacked bar chart requirement is to add border to target value. I have tried with ChartSeriesItem .
It is always at top of the bar chart. what is option to put this border where target value is ends. not at bar ends
I am trying to achieve below one. border should show where actual target value is ends.
Rank 1
Iron
Iron
3 Answers, 1 is accepted
Hi, Ashwini,
I would suggest rendering the Stacked Chart with grouping and using the visual prop to render a custom visual for the target value.
In the below example, I am rendering the series item that represents the target values in group `b`, and I am using the visual property to draw a rectangle with a small width and choosen by you coordinates. I set the visual to the `seriesVisual` function where I am using the Drawing library to draw a Path on top of the series items of the group `a`:
In addition, I can recommend switching to the Bullet Chart since it has a target property:
I hope this matches what you need, but please let me know if you have any further questions.
Regards,
Wissam
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Ycpuv4 (forked) - StackBlitz
Hi, Ashwini,
Thank you for the provided example.
In order to center the ChartSeriesItems of the group `a` in the middle, you can use the value of `e.rect.center().x` as the x coordinate. In addition, to make both bars have the same width, you can pass a constant value as a `width` when setting the Size of the Rectangles. However, decreasing the width of the bars will make them appear as if they are not centered, therefore, I can suggest adding some value to the x coordinate.
I updated the provided example where I am rendering a Rectangle in both the `handleVisualItem` and `seriesVisual` functions:
Please check it and let me know if this matches what you need.
Regards,
Wissam
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Awesome! this solution works perfectly Thanks. One more thing can we add border radius to bar top. and for background can we hide vertical lines, as shown in below image
You are welcome, Ashwini! I am glad that my previous reply was helpful to you!
You can add a border radius on top by appending a Circle shape to a Path shape that draws the column. In addition, you can remove the vertical lines by setting the majorGridLines visible property of the ChartCategoryAxisItem to `false`.
For convenience, I updated the previous example with the above changes:
I hope this helps.
Regards,
Wissam
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.