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

Change Labels position as per the data value

13 Answers 647 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
JP
Top achievements
Rank 1
Veteran
JP asked on 15 Jul 2020, 03:29 PM

Hello, I have a requirement to change categoryAxis labels positions as per the negative and positive value so that they don't overlap with the bars. Like the one in below image. I tried the label rotation property, but it gets applied to all the bars irrespective of it's value. Is there any workaround to achieve this?

13 Answers, 1 is accepted

Sort by
0
Silviya Stoyanova
Telerik team
answered on 17 Jul 2020, 02:40 PM

Hello Abhi,

In order to customize the position of the categoryAxis labels depending on the values, I would suggest using the categoryAxis.labels.visual function. It will give you full control over how the labels will be drawn.

Here is a runnable dojo example: https://dojo.telerik.com/AkiqinAW/2

Kind Regards,
Silviya Stoyanova
Progress Telerik

0
JP
Top achievements
Rank 1
Veteran
answered on 21 Jul 2020, 11:11 AM

Hello Silviya,

I tried the solution you provided. It works pretty well. But the labels which have long text, overlap each other. How can i avoid that? I tried the rotation property. But it didn't work. I have created a Dojo (link below) with my requirement and you will be able to see the problem that i am talking about. Please provide a way to avoid overlapping of labels.

https://dojo.telerik.com/EMIGaNiw

0
Accepted
Silviya Stoyanova
Telerik team
answered on 22 Jul 2020, 05:38 PM

Hello Abhi,

In order to overcome the issue related to labels overlapping, you will need to do some additional transformations into the visual function. It is necessary because that function takes control over the labels' outlook.

For example, set the rotation as follows:

https://docs.telerik.com/kendo-ui/api/javascript/geometry/transformation/methods/rotate

var text; 
for (var i = 0; i < words.length; i++) {
       text = new kendo.drawing.Text(words[i]);
       text.transform( kendo.geometry.transform().rotate(-10))
        layout.append(text);
  }

 

I have prepared two examples:

    I hope that helps.

    Kind Regards,
    Silviya Stoyanova
    Progress Telerik

    0
    JP
    Top achievements
    Rank 1
    Veteran
    answered on 30 Jul 2020, 09:38 AM

    Hello Silviya,

    It works well. Thank you so much for the solution.

    0
    JP
    Top achievements
    Rank 1
    Veteran
    answered on 07 Aug 2020, 11:15 AM
    Hello Silviya,
    The example you posted works fine. In my requirement, I am cropping the labels if they are above certain length. I have created below example, in which you can see that 1st label 'StartSportsStartSports1' got cropped as there isn't enough space below to show entire label. But in case of label 'StarttPlusHDD23', there is enough space above to show complete label, still it got cropped. So how can I show label without cropping, if there is enough space for the complete label to show up? Is there a workaround to detect space above/below the label? or any other way?
    Link to my example: https://dojo.telerik.com/aXoxodEh
    0
    Silviya Stoyanova
    Telerik team
    answered on 11 Aug 2020, 09:23 AM

    Hello Abhi,

    I am afraid I can not propose a solution for a dynamic cropping of the labels. However, I have noticed that the length of 'StarttPlusHDD23' is 15 characters, and you are cropping the text when the length is greater than 14. Is not it possible to compare it with 20 characters for example? 

    If it is applicable in your scenario try adding an ellipsis to all labels and showing the full text in a tooltip. The disadvantage will be that the Chart will have tooltips for the series and tooltips for the labels. Something like that: 

     

    Kind Regards,
    Silviya Stoyanova
    Progress Telerik

    0
    JP
    Top achievements
    Rank 1
    Veteran
    answered on 12 Aug 2020, 06:20 AM

    Hello Silviya,

    I have used render method for displaying complete label on hover. It is working fine. I can make do without dynamic cropping. I have alignment problem of labels. I have attached an image and example to show the issue. I tried the alignContent: start property so that alignment of all labels will be from start. But it doesn't solve the issue. How can I fix it so that all labels will begin from same position? (as it happens with default positioning)

    Example: https://dojo.telerik.com/aXoxodEh/2

    0
    Accepted
    Silviya Stoyanova
    Telerik team
    answered on 13 Aug 2020, 11:31 AM

    Hello Abhi,

    In order to overcome the alignment issue with the labels, I would suggest the following small change in the visual function:

    visual: function(e) {
    	    var origin = e.rect.origin;
                      if(e.value === "BTS" || e.value === "StarttPlusHDD23" ||
                        e.value == "Jul2" || e.value == "E!" || e.value == "Seppp"){
                          
                        origin.y -= e.rect.size.height + 20;                 	
                      }
    //...
    And here is the modified demo: https://dojo.telerik.com/@Silvia/AnAYAXel

    I hope that helps.

    Kind Regards,
    Silviya Stoyanova
    Progress Telerik

    0
    JP
    Top achievements
    Rank 1
    Veteran
    answered on 15 Aug 2020, 02:56 PM

    Hello Silviya,

    Thank you so much. It works perfectly. Thanks for your quick help!

    0
    JP
    Top achievements
    Rank 1
    Veteran
    answered on 18 Sep 2020, 09:28 AM

    Hello Silviya,

    I have a strange issue here. I have made the chart movable along Y axis using 'Pannable: { lock: "Y" }' property as I have lots of data. And also set the min and max values for categoryAxis. Now when I move along Y axis to right, if the chart has both positive & negative values, labels look fine. but if only negative values are seen in the chart then labels are placed way above the axis. I have attached images of both cases. Also added an example code. Please suggest some workaround to position the labels normally in the latter case. 
    Example- https://dojo.telerik.com/UlufebAs

    0
    Alex Hajigeorgieva
    Telerik team
    answered on 22 Sep 2020, 07:07 AM

    Hi,

    You may add another condition and watch the value of the new label y does not become less than a value that suits you.

    I tested the provided example and it seems that 120 looks and behaves well:

    https://dojo.telerik.com/@bubblemaster/OpiLoRIv

     if(origin.y- e.rect.size.height + 20 > 120){
        origin.y -= e.rect.size.height + 20;
    } 

    Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

    0
    JP
    Top achievements
    Rank 1
    Veteran
    answered on 23 Sep 2020, 08:46 AM

    Hi Alex,

    Thanks for this. I will surely try it and post my response. Also, Can you please suggest some solution for the issue I asked earlier.  I am cropping the labels if they are above certain length. I have created below example, in which you can see that 1st label 'StartSportsStartSports1' got cropped as there isn't enough space below to show entire label. But in case of label 'StarttPlusHDD23', there is enough space above to show complete label, still it got cropped. So how can I show label without cropping, if there is enough space for the complete label to show up? Is there a workaround to detect space above/below the label? or any other way?

    Please refer my previous example: https://dojo.telerik.com/UlufebAs

    0
    Patrick | Technical Support Engineer, Senior
    Telerik team
    answered on 24 Sep 2020, 04:13 PM

    Hello Janhavi,

    One way the template can check if the label is above or below is setting the series.categoryField and series.field.  Then, the dataItem will be available in the categoryAxis.labels.template

    Series with defined categoryField and field:

                series: [{
                  name: "Unique visitors",
                  categoryField: "visitor",
                  field: "amount",
                  data: [
                    { visitor: "StartSportsStartSports1", amount: 52000 }, 
                    { visitor: "SonySports2", amount: 34000 },
                    { visitor: "BTS", amount: -23000 },
                    { visitor: "VisualTV", amount: 48000 },
                    { visitor: "MonDayBlue", amount: 50000 },
                    { visitor: "StarttPlusHDD23", amount: -3000 },
                    { visitor: "Jul2", amount: -40000 },
                    { visitor: "E!", amount: -50000 },
                    { visitor: "Seppp", amount: -55000},
                    { visitor: "Oct", amount: -67000 },
                    { visitor: "Nov", amount:  -86000},
                    { visitor: "Dec", amount: -91000 }]
                }],

    CategoryAxis with template:

                categoryAxis: {
                  majorGridLines: {
                    visible: false
                  },
                  line: {
                    visible: true
                  },
                  min: 0,
                  max: 5,
                  labels: {
                    template: "#=cropLabels(value, dataItem)#",
                    justified: true,
    
                    visual: function(e) {
                      //....
                      return layout;
                    }
                  }
                }

    Now, the template can be modified to check if the amount is greater than 0:

            function cropLabels(value, dataItem) {    
              if (value.length > 14 && dataItem.amount > 0) {
                value = value.substring(0, 10);
                return value + "...";
              }
              return value;
            }
    

    Please take a look at this modified Progress Kendo UI Dojo which demonstrates the above. 

    Hope this helps!

    Regards,
    Patrick
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

    Tags
    General Discussions
    Asked by
    JP
    Top achievements
    Rank 1
    Veteran
    Answers by
    Silviya Stoyanova
    Telerik team
    JP
    Top achievements
    Rank 1
    Veteran
    Alex Hajigeorgieva
    Telerik team
    Patrick | Technical Support Engineer, Senior
    Telerik team
    Share this question
    or