datalabel for chart

[kalpa serashiya]

please Give list of all properties available for datalabel  of chart

[Jayavigneshwaran]

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