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

Questions regarding labels in the chart

Hi, I am new to the ejs-chart and syncfusion and I am having trouble replicating a design and not sure if it is even possible.



1.How to add to axis titles and make them horizontal instead of vertical align.

2.How to add a label to the series like "Heavy" and "Light".
3.How to add a horizontal line that has "Current Time" label.


3 Replies

DG Durga Gopalakrishnan Syncfusion Team November 11, 2022 09:44 AM

Hi Germie,


Greetings from Syncfusion.


We suggest you to use annotations to display the custom texts , shapes or images in required location of chart area and stripline to render vertical line. We have prepared sample based on your requirement. Please check with the below snippet and screenshot.


<ejs-chart>

        <e-annotations>

                <e-annotation :content="'annTemplate1'" x='105%' y='53%' region='Chart' coordinateUnits='Pixel'>

                    <template v-slot:annTemplate1="{}">

                        <div id="annotation1"><b>Heavy</b></div>

                    </template>

            </e-annotation>

            //….

       </e-annotations>

</ejs-chart>

primaryXAxis: {

              stripLines: [

                            {

                                           start: 3,

                                           end: 3.03,

                                           color: "#ff512f",

                                           visible: true,

                             }

              ]

        }



Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomChart1259115960.zip


UG :

https://ej2.syncfusion.com/vue/documentation/chart/chart-annotations/

https://ej2.syncfusion.com/vue/documentation/chart/strip-line/


Please let us know if you have any concerns.


Regards,

Durga Gopalakrishnan.



GF Germie Fernandez November 14, 2022 08:16 AM

Hi Durga,


Thank you for your reply. I was able to add the stripline, but I can't seem to make the annotations work. I also tried adding a legend but it is not showing on the chart.






DG Durga Gopalakrishnan Syncfusion Team November 15, 2022 10:11 AM

Hi Germie,


# 1 : I can't seem to make the annotations work


Please mention in which scenario you are unable to display annotation in chart. Kindly share the sample to validate this case from our end.


# 2 : adding a legend but it is not showing on the chart


We suggest you to specify the name for chart series to display the legend. Please check with the below snippet.


<ejs-chart>

   <e-series-collection>

     <e-series name='Max Temp'> </e-series>

     <e-series name='Avg Temp'> </e-series>

  </e-series-collection>

</ejs-chart>


Please let us know if you have any concerns.


Regards,

Durga Gopalakrishnan.


Loader.
Live Chat Icon For mobile
Up arrow icon