Modifying Column Chart of Kendo UI?

662 Views Asked by At

Custom chart like this

I want to create Chart as Shown in the above link Image using kendo Ui column chart.

My Questions are:

  • Is there any way to display custom text like (category + value)=(balance + $ 1,111) on category axies ... ?

  • I want's to display some tags on each Column bar of the kendo chart ?

  • For this what i am thinking is display the Div with Tag over the kendo chart, but my problem is when i increase the height of chart the height of column bar is also increased. what i need is i wants to add some space above columns in chart.so in that space i can place DIV with tags. But i am not able to add empty space above columns in chart.Is there any way to do this ?

  • Is there any other way to Create Chart like in in Image Link using kendo ui???

1

There are 1 best solutions below

0
On BEST ANSWER

Sorry, your link doesn't work anymore..

For the Category Axies Labels, you can do some formatting using templates but the calculations need to be made in the model. We did some truncation for really long labels and displayed it using a template:

        .CategoryAxis(category => category
        .Labels(label => label
            .Rotation(45)
            .Template("#: dataItem.CategoryLabel #")                             
            )            
        )

Displaying the tags above the columns I think you can use series notes property and pass it a template. Note that anything display inside the graph area is in svg not html.