Line chart labels overlapping

[mira]

Hi,

I've overlapping issue when numbers are too close. Can you please advice how to fix line chart labels overlapping issue?
Here is also the snippet link https://dojo.telerik.com/iZiqEfaX

 

 

[Nikolay]

Hi Mira,

You can set different margins for the labels to adjust their positing and avoid overlapping.

         {
              name: "India",
              data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
              labels: {
                margin: {
                  bottom: 2
                }
              }
            }

Check out the updated Dojo demo: 

• https://dojo.telerik.com/iZiqEfaX/2

Please note that when there are more than 2 series it is difficult to make all the labels visible at all times.

You can also use a template function and hide some of the overlapping labels:

          {
              name: "Russian Federation",
              data: [4.0, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, 1.832, 4.3, 4.3],
              labels: {
                template: labelsTemplate 
              }
            }
...
function labelsTemplate(data) {
          if (data.dataItem === 4.0) {
            return ""
          } else {
            return data.dataItem
          }
        }

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[mira]

Thank you very much Nikolay! This is what I was looking for.

Is it also possible to set number colors like their lines, for example make green color to all "World" numbers. 

[Nikolay]

Hi Mira,

You can set a color for the series.lables.color matching the series.color property:

Dojo: https://dojo.telerik.com/iZiqEfaX/4

Let me know if you have any questions.

Regards,

Nikolay