Value Axis Title on Top of it

[shaneed]

Hi, We have a multi values axis chart which is working as expected but we have a requirement of showing the the name of the plot above the value axes, let it be by using either title or legend (title seems more appropriate for this scenario). Any way I try with the title it comes only by the side of the value axis not on top of it. Can this be done some way.

[Eduardo Serra]

Hello Shaneed,

Moving the ValueAxis title to the top is not supported by the Kendo UI Charts API; the best that can be done using the title property is to set the rotation to 0 and its position to top but it will still appear the side of axis.

A valid workaround would be to include a custom div that overlaps the chart and positioning it where you want it. I have prepared a sample in the Kendo UI Dojo that demonstrates this approach; you can take a look at it here.

In the render event I attach my custom message to the #chart:

render: function(e)
   $('<div class="custom-overlay"><p id="message">Growth Percentage</p></div>').appendTo("#chart");
},

And my custom CSS takes care of positioning it where I want:

<style>
  .custom-overlay {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 20px;
  }
  #message{
      position: absolute;
      left: 0;
      top: 0px;
  }
</style>

If you wanted it to be centered, this could be further improved by applying padding to the left side of the chart.

I hope this helps!

Regards,
Eduardo Serra
Telerik by Progress

[shaneed]

Sad it can't be done by default. Anyway will try your suggestion.

[J]

Hi,

 

I want to ask about the same functionality at Kendo graph for Angular.

We are working on mobile device views and there is not much space on the left side of the axis, so place the title above would be the best solution. Could you give me an advice how to do that?

 

Thanks.

J

[Martin]

Hi J,

Indeed I am not sure what is the desired end goal in this case.

To set a Kendo Angular Chart title, the developer can use <kendo-chart-title> component. For more details please check the following article from our documentation:

https://www.telerik.com/kendo-angular-ui/components/charts/elements/title/

To further customize the position of the title, align and position built-in properties could be set:

https://stackblitz.com/edit/angular-wxqgd1

Please accept my apologies If I misunderstood the question.