dataLabel new line and chart border

Question

I would like to make a datalabel on 2 lines. I've tried 
 and  and neither seem to work. Also the bar chart has a very vague border around it. How can i get rid of it?

Dharanidharan Dharmasivam · Answer

Hi Caleb, 

Kindly find the response for your queries below. 

Query #1 : I would like to make a datalabel on 2 lines. 
Response:   Currently the data labels can’t be break into multiples lines. However, your requirement can be achieved using the annotation feature. We have prepared a sample in which using the load event of chart with respect to points length, we have created the annotations dynamically. Find the code snippet below to achieve your requirement. 
 




JS: 
 
$("#container").ejChart({ 
      //... 
       load: 'chartLoad' 
}); 
 
function chartLoad(sender) { 
              var points = sender.model.series[0].points; 
              sender.model.annotations = []; 
              for (var i =0; i< points.length; i++){ 
                    var id = 'annotationTemplate' + i; 
                     //Create div element dynamically  
                    var currentDiv = document.createElement('div'); 
                    currentDiv.id = id; 
//Here you can specify the width to the div element, so that with respect size the text will be placed properly as per your requirement 
                    currentDiv.innerText = points[i].x; 
                    currentDiv.style.display = "none";               
                    document.getElementsByTagName('body')[0].appendChild(currentDiv); 
                    sender.model.annotations.push({visible:true, content: id, coordinateUnit :"points", x:i, y:3}) 
              } 
} 
 
 
In the above code, we have rendered the annotations with respect to coordinateUnit as points. For more information on annotation, find the help document here. 
 
Screenshot: 
  

Sample for reference can be find from below link. 
http://jsplayground.syncfusion.com/gigdh04a  

Query #2: Also the bar chart has a very vague border around it. How can i get rid of it? 
Response: Your requirement can be achieved by using the chartArea.border.width property. Kindly find the code snippet below to achieve this requirement. 
 




JS: 

$("#container").ejChart({ 
      //... 
       chartArea: { border: { width: 0 } }, 
}); 



Screenshot: 
  
Sample for reference can be find from beow link. 
http://jsplayground.syncfusion.com/q12qsqsy  

Thanks 
Dharani.