We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Multiple datalabel template

Thread ID:

Created:

Updated:

Platform:

Replies:

145716 Jul 5,2019 04:52 AM UTC Jul 11,2019 09:27 AM UTC jQuery 3
loading
Tags: ejChart
Sutthipong
Asked On July 5, 2019 04:52 AM UTC

Is it possible to use multiple template for datalabel.
e.g. If x < 10 then use templete 'template1' and if x>=10 then use template 'template2'

Baby Palanidurai [Syncfusion]
Replied On July 5, 2019 10:20 AM UTC

Hi Sutthipong, 
  
 
Greetings from Syncfusion. 
 
  
We have analysed your query. Yes, we can add multiple template for data label using seriesRendering event. Using this event we can assign marker template for each points based on provided condition. We have prepared a simple sample based on your requirement. In that multiple template is working fine as you expect. Please find below sample and code snippet, 
 
Code Snippet: 
seriesRendering: function(args){ 
                                           for(var j=0; j < args.data.series.points.length; j++){ 
                                           if(args.data.series.points[j].y > 19 && args.data.series.points[j].y < 29 ) { 
              args.data.series.points[j].marker =  { dataLabel: { visible:true, template: 'template' }}; 
                                           } else if(args.data.series.points[j].y > 9 && args.data.series.points[j].y < 18 ) { 
              args.data.series.points[j].marker =  { dataLabel: { visible:true, template: 'template1' }}; 
            } else { 
               args.data.series.points[j].marker =  { dataLabel: { visible:true, template: 'template2' }}; 
            } 
                                           } 
                                           }, 
 
Screenshot: 
 
 
 
Hope this helps. 
 
Regards, 
Baby. 



Sutthipong
Replied On July 10, 2019 03:49 AM UTC

Sorry for late response.
It working as I expected but I have some question is it possible to custom value for datalabel like display value to absolute value or format decimal place.


Baby Palanidurai [Syncfusion]
Replied On July 11, 2019 09:27 AM UTC

  
Hi Sutthipong, 
  
Thanks for the update. 
  
We have analyzed your query. We can achieve your requirement using the displayTextRendering event in the chart. Using this event we customize the data label text as you expect. But this is not applicable for template property. If you want to customize the text and shape for data label without using the template, then we suggest you to use datalabel fill, shape, and border properties and displayTextRendering event. In this case, we can show the formatted text as you expected format. We have attached the modified sample and screenshot. Please find below sample and screenshot, 
Code Snippet: 
//To customize the outer appearance of the datalabel 
seriesRendering: function(args){ 
    for(var j=0; j < args.data.series.points.length; j++){ 
      if(args.data.series.points[j].y > 19 && args.data.series.points[j].y < 29 ) { 
              args.data.series.points[j].marker =  { dataLabel: { visible:true, fill: 'aqua',border: { color: "green", width: 1}, shape: 'circle', offset: 20 }}; 
         } else if(args.data.series.points[j].y > 9 && args.data.series.points[j].y < 18 ) { 
              args.data.series.points[j].marker =  { dataLabel: { visible:true, fill: 'yellow',border: { color: "orange", width: 1}, shape: 'circle', offset: 20 } }; 
            } else { 
               args.data.series.points[j].marker =  { dataLabel: { visible:true, fill: 'lawngreen',border: { color: "red", width: 1}, shape: 'circle', offset: 20 } }; 
            } 
                  } 
}, 
//To customize the text 
          displayTextRendering: function(args) { 
          args.data.text = Math.ceil(args.model.series[args.data.seriesIndex].points[args.data.pointIndex].y) + '%'; 
                              
          }, 
 
Screenshot: 
 
 
 
Hope this helps. 
 
Regards, 
Baby. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon