This is a migrated thread and some comments may be shown as answers.

Value Axis Title on Top of it

3 Answers 60 Views
Charts
This is a migrated thread and some comments may be shown as answers.
shaneed
Top achievements
Rank 1
shaneed asked on 30 Jan 2017, 12:04 PM
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.

3 Answers, 1 is accepted

Sort by
0
Accepted
Eduardo Serra
Telerik team
answered on 30 Jan 2017, 06:12 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
shaneed
Top achievements
Rank 1
answered on 02 Feb 2017, 02:13 PM
Sad it can't be done by default. Anyway will try your suggestion.
0
J
Top achievements
Rank 1
Iron
Iron
answered on 28 Jun 2021, 02:30 PM

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
Telerik team
commented on 30 Jun 2021, 12:06 PM

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.

Tags
Charts
Asked by
shaneed
Top achievements
Rank 1
Answers by
Eduardo Serra
Telerik team
shaneed
Top achievements
Rank 1
J
Top achievements
Rank 1
Iron
Iron
Share this question
or