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. Image for the cookie policy date

datalabel for chart

please Give list of all properties available for datalabel  of chart

1 Reply

JA Jayavigneshwaran Syncfusion Team 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.




Live Chat Icon For mobile
Up arrow icon