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
close icon

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

[JS]

    $("#container").ejChart(

                        {

                            commonSeriesOptions: {

                                type: 'line',

                                marker:

                              {

                                  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.

 

Thanks,

Jayavigneshwaran



Loader.
Live Chat Icon For mobile
Up arrow icon