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

How to move the labels of CategoryAxis to the middle when setting step

6 Answers 80 Views
Charts
This is a migrated thread and some comments may be shown as answers.
kako
Top achievements
Rank 1
kako asked on 14 May 2018, 12:51 AM

Thank you as always!

Is there a way to move the labels of CategoryAxis to the middle when setting step to CategoryAxis?

https://dojo.telerik.com/iWeWeDUs

6 Answers, 1 is accepted

Sort by
0
kako
Top achievements
Rank 1
answered on 14 May 2018, 01:42 AM

I'm sorry, but please let me edit the image.

In the last image, I deleted "2011" at the far right, but I will cancel it.

I also want to move "2011" at the far right and extend plotArea to the right accordingly.

Is this possible?

0
Konstantin Dikov
Telerik team
answered on 16 May 2018, 07:23 AM
Hello Kako,

You can set the categoryAxis lables property with a padding:
labels: {
                      margin: {
                        left: 105,
                      }
                    }

For your convenience, following is a dojo example with the result that you want to achieve:

Best Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
kako
Top achievements
Rank 1
answered on 17 May 2018, 12:28 AM

Thank you for answering!

Can I change the area at the top of 2011 to PlotArea?

0
Accepted
Tsvetina
Telerik team
answered on 18 May 2018, 02:44 PM
Hi Kako,

When a margin is used to offset the labels, it is not possible to display more of the Chart content on top of the 2011 label, as the margin just moves the labels position independently from the rest of the Chart content.

Another way to move the labels to the middle of major units is to set justified: false for the categoryAxis. However, this will also make the series start and end at the middle of major units. Here, you can see the result:
https://dojo.telerik.com/iWeWeDUs/2

Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
kako
Top achievements
Rank 1
answered on 24 May 2018, 06:20 AM

OK.

Thanks!!

0
kako
Top achievements
Rank 1
answered on 24 May 2018, 06:21 AM

OK.

Thanks!

Tags
Charts
Asked by
kako
Top achievements
Rank 1
Answers by
kako
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Tsvetina
Telerik team
Share this question
or