Questions regarding labels in the chart

[Germie Fernandez]

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.

[Durga Gopalakrishnan]

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.

[Germie Fernandez]

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.

[Durga Gopalakrishnan]

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.