Always display last label on Line Chart when using Step

[JAMES]

I have a similar question to one which was posted on the WPF forum.  When using Step to de-clutter the Category Axis is there a way to always display the last label in jQuery?  

[Nikolay]

Hello JAMES,

You can use a template function for the categoryAxis labels instead of setting a step. This will allow you to render the last label for all classes. For example:

categoryAxis: {
              majorGridLines: {
                visible: false
              },
              labels: {
                template: function(data) {
                  count++;
                  if(data.value === "2011") {
                    return data.value
                  }
                  if(count % 2 == 0) {
                    return "";                  
                  }
                  else return data.value;
                }
              }
            }

Dojo demo: https://dojo.telerik.com/ociUUdXs

Regards,
Nikolay
Progress Telerik

[JAMES]

Hi Thanks for this solution, it worked and I can now ensure the last label always gets added.

The follow on issue with this is that when the last label is immediately next to the preceding stepped value they now overlap.

 

Is there a way to shift or add margin to only the last label?

 

[Nikolay]

Hi James,

It's not possible to apply a margin on a specific label only. You will need, again, in the categoryAxis labels template, to come up with a logic for sipping the label before the ones one.

Regards,

Nikolay

[JAMES]

When I skip the last label using the suggested method, the previous label gets cut off if it extends beyond the chart, how can I prevent this?  If there is a last label that extends beyond the chart without issue, see previous examples.

[Nikolay]

Hi James,

I am not sure how you get the last category axis label cut off. Could you please modify the below Dojo to demonstrate it?

https://dojo.telerik.com/aSNXcptW

Regards,

Nikolay

[JAMES]

https://dojo.telerik.com/frzmMuet

 

In the above Dojo, I have increased to label name size which exaggerates it to show what happens with more data. 

You can see that when the last label is present it is fine

However

If you comment out the code which forces the last label to display then the previous label is also partially cut off.

 //if(data.value === "2011-B1234567891011121314") {
//                    return data.value
 //                 }

[Nikolay]

Hi James,

Thank you for the Dojo demo.

I can suggest applying a margin to the right of the chart area so the last labels are always visible.

         chartArea: {
              margin: {
                right: 60
              }
            }

Dojo demo: https://dojo.telerik.com/ksyZxLja

Regards,

Nikolay

[JAMES]

Thanks, I will add that. My previous solution was having the omitted label return "  " which also worked but is not quite as neat. Thankyou.