Bar Chart Label Top Aligin v2018.1.22

[C.F.]

Hi,

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

Regards,
Davis

[Preslav]

Hello Davis,

I believe that you are looking for the categoryAxis.labels.rotation property:

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels#categoryAxis.labels.rotation

For a runnable example, check this test Dojo:

• https://dojo.telerik.com/uNoRIdEf

I hope this helps.


Regards,
Preslav
Progress Telerik

[C.F.]

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

 

[Preslav]

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.

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels#categoryAxis.labels.visual

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:

• https://dojo.telerik.com/ojAJeYiq

Regards,
Preslav
Progress Telerik

[C.F.]

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