Data label disappear when value reach maximum value

[Sutthipong]

This is my chart axis configuration 

primaryYAxis: {

                range : { max: 100 }

            }

and this is series configuration

{

                name: 'Avg',

                points: [],

                type: 'line',

                fill: 'black',

                marker: {

                    dataLabel: {

                        //Set text alignment to datalabel text

                        visible: true,

                        horizontalTextAlignment: "center",

                        font: {

                            size: seriesFontSize,

                            fontWeight: 'bold',

                            color: 'black'

                        }

                    },

                    font: {

                        fontWeight:'bold'

                    },

                    border: {

                        width: 0

                    },

                    visible: true

                },

                tooltip:

                {

                    visible: true

                }

            }

When data is near 100 datalabel of that point disappear from chart. Is there a way to increase top area space for display datalabel.

PS. My requirement not allow me to increase maximum range beyond 100

[Kalaimathi Chellaiah]

Hi Sutthipong, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. We can show the hidden datalabel values by using  showEdgeLabels property of the data label.  By setting showEdgeLabels property value as true we can achieve your requirement. We have prepared a simple sample based on your scenario. Please find below, 

 

Code Snippet: 

marker: { 

                    dataLabel: { 

                        visible: true, 

                        horizontalTextAlignment: "center", 

                       //To show hidden datalabel text 

                       showEdgeLabels: true, 

                        font: { 

                             

                            fontWeight: 'bold', 

                            color: 'red' 

                        } 

                    }, 

                    visible: true 

                }, 

 

Screenshot: 

 

 

Sample: https://jsplayground.syncfusion.com/d0aoriah 

 

Also we would like to let you know that,  by using offset property of the datalabel we can align the label vertically. Please refer below UG link which explains more information about datalabel, 

https://help.syncfusion.com/js/chart/data-markers#add-labels 

Kindly revert us, if you need further assistance. 

Regards, 

Kalai.