Kendo bar chart category label is top on bar

1 Answer 440 Views
Charts
Sanjay
Top achievements
Rank 1
Iron
Sanjay asked on 18 Jun 2021, 01:06 PM

Hello  I am trying to get this type of bar chart. can you provide a example of how to show category name will be shown top on bar. 

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 23 Jun 2021, 09:19 AM

Hello, Sanjay,

You can enable the labels configuration of the Chart and combine it with a template and a margin in order to display the name of the Category above the bar.

                seriesDefaults: {
                    type: "bar",
                  labels: {
                      visible: true,
                      position: "insideBase", // Position the label to the left on the inside of the bar.
                      template: "#=category#", // Display the name of the category as it's content.
                      margin: {
                        bottom: 50 // Apply a margin in order to move the label upwards.
                      }
                    }
                }

Dojo example:

https://dojo.telerik.com/@gdenchev/ENeRaheQ 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
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/.

Sanjay
Top achievements
Rank 1
Iron
commented on 24 Jun 2021, 03:34 AM

Thanks Georgi Denchev
VICTOR
Top achievements
Rank 1
commented on 20 Jul 2021, 02:06 PM

I'm having the same difficulty, I could share the example. I cannot access the Dojo link
Georgi Denchev
Telerik team
commented on 23 Jul 2021, 08:51 AM

Hi, Victor,

I have attached the code from the dojo as a zipped html file, you can download and examine it locally.

VICTOR
Top achievements
Rank 1
commented on 26 Jul 2021, 08:15 PM

thank you George. Can I make this kind of graph using angular instead of jquery ?
VICTOR
Top achievements
Rank 1
commented on 26 Jul 2021, 08:16 PM

would have an example with angular?
Georgi Denchev
Telerik team
commented on 28 Jul 2021, 10:59 AM

Hi, Victor,

May I ask you which version of Angular are you using?

Tags
Charts
Asked by
Sanjay
Top achievements
Rank 1
Iron
Answers by
Georgi Denchev
Telerik team
Share this question
or