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

Bar Chart Label Top Aligin v2018.1.22

4 Answers 51 Views
Charts
This is a migrated thread and some comments may be shown as answers.
C.F.
Top achievements
Rank 1
C.F. asked on 30 Apr 2018, 06:44 AM

Hi,

Is it possible to make the Bar Chart Label Top Align, thank you ? (v2018.1.221)

Regards,
Davis

4 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 30 Apr 2018, 02:24 PM
Hello Davis,

I believe that you are looking for the categoryAxis.labels.rotation property:
For a runnable example, check this test Dojo:
I hope this helps.


Regards,
Preslav
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
C.F.
Top achievements
Rank 1
answered on 02 May 2018, 07:14 AM

Dear Preslav,

Sorry to say that  previous attached example already rotated by 90 degree.

But how can we Top-Align the Multi-lines labels? (now is center aligned).

For example:

ABCD

ABCD

A  CD

    CD

    C

 

Regards,
Davis

 

0
Accepted
Preslav
Telerik team
answered on 03 May 2018, 01:40 PM
Hi Davis,

Thank you for elaborating on the requirements. For the time being, there is no configuration that could provide this out of the box.

What I could suggest is using the categoryAxis.labels.visual configuration to create your own labels.
For example:

labels: {
  visual: function(e) {
    var rect = new kendo.geometry.Rect(e.rect.origin, e.rect.size);
    var layout = new kendo.drawing.Layout(rect, {
      orientation: "vertical",
      alignContent: "center"
    });
    var words = e.text.split(" ");
    for (var i = 0; i < words.length; i++) {
      layout.append(new kendo.drawing.Text(words[i]));
    }
    layout.reflow();
    layout.transform(kendo.geometry.transform().rotate(90, rect.center()));
    return layout;
  }
}

For a runnable example:

Regards,
Preslav
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
C.F.
Top achievements
Rank 1
answered on 04 May 2018, 02:09 AM

Dear Preslav,

Thank you for the information & suggestion. We studied the visual function and going to accept the center align labels for the moment. Thanks again for your help!

 

FYI, last testing data

categories: ["testtesttest bar 1111111 22222222 33333333", "testest\n foo 8888\n 99999"]

 

Regards,

Davis

Tags
Charts
Asked by
C.F.
Top achievements
Rank 1
Answers by
Preslav
Telerik team
C.F.
Top achievements
Rank 1
Share this question
or