How to disable chart vertical lines and how to make the lines rounded?

1 Answer 218 Views
Charts Grid Styling Styling / Themes
n/a
Top achievements
Rank 1
n/a asked on 21 Jun 2022, 02:20 PM

hey ive tried to disable the horizontal grid lines but couldnt make it work, also i couldnt find any place talking about how to round the lines of data, is it possible? (something like border-radius)

this is my chart code:

this is how it looks: ( i want to disable the vertical lines on the background)

wanted result: (with rounded edges)

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 23 Jun 2022, 01:06 PM

Hello hagi,

You can round the series items of the chart by implementing a custom Visual template like explained in this thread:

For removing the grid lines in question, you can set the "majorGridLines" "visible" property of the ChartCategoryAxisItem" to "false":

For convenience, I have prepared a small sample demonstrating the suggestions above, you can find it here:

Regards,
Vessy
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/.

n/a
Top achievements
Rank 1
commented on 28 Jun 2022, 05:05 AM

thank you so much! 

is it possible to thinner the data lines as well?

Vessy
Telerik team
commented on 28 Jun 2022, 12:13 PM

Hi hagi,

You can change the coordinates of the custom drawn objects (the bar and the circle used for its radius) in order to draw a thinner bar. For example, you can use a common delta variable substracting its value from the drawing calculations in a similar way:

Mesut
Top achievements
Rank 1
commented on 26 Jan 2023, 07:06 PM

How is it possible for MVC. I could not find drawing in nuget.
Vessy
Telerik team
commented on 27 Jan 2023, 04:10 PM

Hi, Mesut, the KendoReact and ASP.NET MVC charts shares the same core logic (@progress/kendo-drawing), but the imports might differ. You can see how to use a custom visual in an MVC scenario in this demo:

https://demos.telerik.com/aspnet-mvc/bar-charts/visuals

If you have further questions related to ASP.NET MVC Charts, I would advise that you open a thread in the corresponding forum below in order to reach the appropriate community:

https://www.telerik.com/forums/aspnet-mvc

Tags
Charts Grid Styling Styling / Themes
Asked by
n/a
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or