Place chart Y-axis title on the top of the axis

1 Answer 197 Views
Charts
J
Top achievements
Rank 1
Iron
Iron
J asked on 29 Jun 2021, 07:42 AM

Hi,

I'm facing a situation, that I need to show the title of the Y-axis. As I saw in the docs, it is possible to place the title next to Y-axis labels but there is no choice to place it on the top of the axis.

I found this workaround for Kendo UI for jQuery and I'd need something similar for Angular.

I'm able to place a div with some text on the same DOM level as kendo chart, like this

<div id="chart-title">Title</div>

<kendo-chartid="kendo-chart">

...

and to assign z-index to chart-title to be shown in the front, but it corrupts me the chart completely - it changes the font.

So is there any way how to do this?

Thanks a lot for any advice.

J

1 Answer, 1 is accepted

Sort by
0
Accepted
Hetali
Telerik team
answered on 29 Jun 2021, 08:13 PM | edited on 06 Jul 2021, 10:13 PM

Hi,

To place the Kendo UI Chart Title on top of the Y-axis, use the align property of the TitleComponent and set it to 'left'. To place it exactly above the Y-axis label, you can also set the margin.left to '0'. For example:

<kendo-chart>
  <kendo-chart-title 
    text='Gross domestic' 
    align="left" 
    margin="{left: 0}"
  >
  </kendo-chart-title>
</kendo-chart>

In this StackBlitz example, the Kendo UI Chart Title is placed above the Y-axis.


To show the text at the same DOM level as the Chart, use the opacity property of the ChartAreaComponent as seen below:

<div class="chart-title">Title</div>
<kendo-chart [categoryAxis]="{ categories: categories }">
  <kendo-chart-area opacity="0"></kendo-chart-area>
</kendo-chart>

In this StackBlitz example, the text is placed at the same DOM level as the Chart and is visible in the Chart Area.


I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

J
Top achievements
Rank 1
Iron
Iron
commented on 02 Jul 2021, 08:22 AM

Hi,
I really do not want to place chart title above Y-axis, because my chart is entitled by some other text. I need to find some other solution. My workaround mentioned above works, but it's just workaround, I'd like to have some clean solution.
Thanks.
J
Hetali
Telerik team
commented on 06 Jul 2021, 10:14 PM

Hello,

Please take a look at the updated answer where I have used the opacity property. Give it a try and let me know if it helps.

Thanks,
Hetali

J
Top achievements
Rank 1
Iron
Iron
commented on 07 Jul 2021, 05:50 AM

Hi,

I tried to set 'background' property to 'transparent' color and it worked, but 'opacity' seems to be a better solution.

Thank you for your help.
J
Tags
Charts
Asked by
J
Top achievements
Rank 1
Iron
Iron
Answers by
Hetali
Telerik team
Share this question
or