datalabel for chart

Question

please Give list of all properties available for datalabel  of chart

Jayavigneshwaran · Answer

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