1 Answer, 1 is accepted
Hello Dylan,
The ChartSeriesMarkers have "size" property that can be set, which sets the width and the height to the same value, regardless of the shape property:
<ChartSeriesMarkers
type={'rect'}
size={30}
border={{
width: 1,
}}
/>Here is an example with the above:
However, please have in mind that if the size of the markers should be smaller than the columns and rows width in order for the markers to not be cut. Additionally, you will have to update the markers size based on the Chart width (the screen size).
Another option, which will be completely automated, would be to render custom visual based on the current size:
The above approach will resize automatically when the Chart size changes and will keep the square shape of the markers.
Hope this helps.
Regards,
Konstantin Dikov
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
Thanks. The second solution seems to be more along the lines of what I need, but there is very little documentation to help customize this further. How would I draw a rounded rect (like you get when setting SeriesMarkers type to 'roundedRect' and borderRadius)? I see there is a path function called arcTo(). I'm not sure if this is the best function to use to draw a rounded rect, but its first parameter is confusing:
@param end - The end point of the arc.
A point should have an x coordinate and a y coordinate. How can the end point of the arc be a single number? The SVG documentation for the A command specifies a point with x and y coordinates.
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#arcs
You are correct that the first parameter of "arcTo" should be a point and if you pass an array with the coordinates it will be handled correctly. Additionally, you can use the "arc" for drawing it from the current point. I have modified the previous example, so it rounds the corners (I have used arcTo and arc):
https://stackblitz.com/edit/react-c7ketk-rk436n?file=app%2Fmain.jsx
As for the documentation, I agree that it needs lots of improvements, but in general you should be able to follow the SVG standards for drawing API.