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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

datalabel for chart

Thread ID:





118367 Mar 3,2015 12:30 PM UTC Mar 4,2015 04:43 AM UTC JavaScript 1
Tags: ejChart
kalpa serashiya
Asked On March 3, 2015 12:30 PM UTC

please Give list of all properties available for datalabel  of chart

Jayavigneshwaran [Syncfusion]
Replied On March 4, 2015 04:43 AM UTC

Hi Kapla,

We have analyzed this and listed the properties available to customize the data labels in chart. Find it from the below table




                            commonSeriesOptions: {

                                type: 'line',



                                  dataLabel: {

                                      angle: -45,                      // to rotate the data label

                                      border: {

                                          color: "green",                // color of the border

                                          width: 2                        // width of the border


                                      connectorLine: {                   // this is for accumulation series

                                          type: "bezier",                 // type of the connector line

                                          width: 2                        // width of the connector line


                                      fill: "red",                      // background of the data label

                                      font: {                            // properties to customize the text in data label

                                          fontFamily: "algerain",

                                          fontStyle: "italic",

                                          fontWeight: "lighter",

                                          opactiy: 0.5,

                                          color: "white"


                                      horizontalTextAlignment: "far",   // to align the data label horizontally

                                      margin: {                           // properties to adjust the text inside the shape

                                          left: 10,

                                          right: 10,

                                          top: 10,

                                          bottom: 10


                                      opacity: 0.5,                 // opacity of the data label

                                      textPosition: "top",          // position to place the data label

                                      verticalTextAlignment: "far"// to align the data label vertical

                                      visible: true,                  // to toggle the visibility







And you can also refer the below API documentation link to know the available API’s and their syntax.

Link: http://help.syncfusion.com/UG/JS_CR/ejChart.html#series->marker->dataLabel


The below link show a sample with data label and data label template

Link:  http://js.syncfusion.com/demos/web/#!/azure/chart/chartcustomization/labeltemplate


Please let us know if you have any concern.





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