Add arrow(s) to Angular Charts (Column, Bar)

[Gabriel Alva]

Hi

I've been checking the documentation for Essential JS 2 for Angular trying to find how to do something in charts but couldn't. According to this (https://help.syncfusion.com/xamarin-android/sfchart/chartannotation , Adding arrow to line annotation) you can add arrows or any kind of shape through anotations. Is it possible to do this in some way but for the Angular Charts? Thank you!

[Baby Palanidurai]

Hi Gabriel, 

Greetings from Syncfusion. 

We have analyzed your query. We can achieve your requirement by using line series and annotation. For more information about annotations, kindly find the below documentation link, 

https://ej2.syncfusion.com/angular/documentation/chart/chart-annotations/?no-cache=1 

Code snippet: 

<ejs-chart style='display:block;' id='chartcontainer' [primaryXAxis]='primaryXAxis'> 

      <e-annotations> 

              <e-annotation x='2015' y=331 coordinateUnits='Point' verticalAlignment='Top'> 

                  <ng-template #content> 

                             <div id="chart_cloud"> 

                                  <div id="arrow-right" class="arrow-right"></div> 

                             </div> 

                  </ng-template> 

              </e-annotation> 

              </e-annotations> 

              <e-series-collection> 

                  <e-series [dataSource]='data' type='StackingColumn' xName='x' yName='y' [marker]='marker'> </e-series> 

                  <e-series [dataSource]='data1' type='StackingColumn' xName='x' yName='y' [marker]='marker'></e-series> 

                  <e-series [dataSource]='data2' type='Line' xName='x' yName='y'> </e-series> 

              </e-series-collection> 

</ejs-chart> 

 

<style> 

              #arrow-right { 

                             width: 0; 

                             height: 0; 

                             border-top: 10px solid blue; 

                             border-bottom: 10px solid transparent; 

                             border-left: 10px solid transparent; 

    border-right: 10px solid transparent; 

              } 

</style> 

Screenshot: 

 

 

Sample link:  

https://stackblitz.com/edit/angular-yl15nt?file=app.component.html 

https://stackblitz.com/edit/angular-p8fvmc?file=app.component.html 

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[Gabriel Alva]

Hi Baby

Thank you so much, this helped me a lot. I'll try adding some other things that I also need, like text on the arrow connecting the two columns. I guess another annotation would work, right?

Regards,
Gabriel

[Baby Palanidurai]

Hi Gabriel, 

Thanks for your update. 

We have analyzed your query. Yes, you can add another annotations to show text between connecting the arrows. Please find the below code snippet, 

<e-annotations> 

   <e-annotation x='2015' y=341 coordinateUnits='Point' verticalAlignment='Top'> 

       <ng-template #content> 

              <div id="chart_cloud"> 

                  <div id="arrow-right" class="arrow-right"></div> 

              </div> 

        </ng-template> 

   </e-annotation> 

   <e-annotation x='2014' y=289 coordinateUnits='Point' verticalAlignment='Top'> 

       <ng-template #content> 

              <div class='annotation-text'>291</div> 

      </ng-template> 

    </e-annotation> 

    <e-annotation x='2015' y=331 coordinateUnits='Point' verticalAlignment='Top'> 

      <ng-template #content> 

              <div class='annotation-text'>333 </div> 

      </ng-template> 

    </e-annotation> 

    <e-annotation x='50%' y='15%' coordinateUnits='Pixel' verticalAlignment='Top'> 

        <ng-template #content> 

              <div class='annotation-text'>+42 (+14%)</div> 

        </ng-template> 

     </e-annotation> 

  </e-annotations> 

Sample link: https://stackblitz.com/edit/angularchartannotation?file=app.component.html 

Kindly revert us, if you have concerns. 

Regards, 

Baby. 

[Gabriel Alva]

Hi Baby

That's exactly what I wanted, I tried to do something like that but playing with the margin of the content inside the annotation. Your code is way better. Thank you very much!


Now, I have one last question, but I'm not sure if it's completely related to this or if I should open a new thread.
In some cases I need this arrow to connect two differente charts, like two waterfall charts in this case.

Is there a way to do this? Like putting those two charts inside of some kind of container and then create the annotation to do the arrow?

Regards,

Gabriel

[Baby Palanidurai]

Hi Gabriel, 

  

Thanks for your update. 

  

We have analyzed your query. As of now, we don’t have support to place the annotation between the two charts. If you want to use annotations between the two charts, half of the annotations from the two charts only visible. Another options, you can use multiple x axis and place the two series for each axis instead of two charts and then customize the annotations.  

  

Kindly revert us, if you have any concerns. 

  

Regards, 

Baby.  

[Gabriel Alva]

Hi Baby, thank you for your answer

I tried using two x axis as you recommended but it's not working, I'm getting an out of memory exception and it just crashes. I don't think I'm understanding correctly the "Multiple Axis" documentation or sample code. Do you think you could check what it is that I'm doing wrong? This is a sample app for what I'm trying to accomplish (the last image with two Waterfall charts).

https://stackblitz.com/edit/angular-wvugap

I commented what causes the app to crash. Thank you very much.

Kind regards,
Gabriel

[Baby Palanidurai]

Hi Gabriel, 

 

Thanks for your update.  

 

We have checked your sample code. In that, we have changed to add the second series in the second axis. Please find the below code snippet, 

Code snippet: 

<ejs-chart id='chart-container' [primaryXAxis]='primaryXAxis' [title]='title'> 

      <e-axes> 

        <e-axis columnIndex=1 name='xAxis1' valueType='Category' opposedPosition='true'> 

        </e-axis> 

      </e-axes> 

       <e-columns> 

             <e-column width=50%></e-column> 

             <e-column width=50%></e-column> 

        </e-columns> 

      <e-series-collection> 

          <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' [columnWidth]='columnWidth'  

          [connector]='connector' [sumIndexes]='sum' [marker]='marker'> </e-series> 

          <e-series [dataSource]='data' type='Waterfall' xName='x' xAxisName='xAxis1' yName='y'  

          [columnWidth]='columnWidth' [connector]='connector' [sumIndexes]='sum1' [marker]='marker'> </e-series> 

      </e-series-collection> 

    </ejs-chart> 

 

If the above is don’t meet your requirement, kindly revert us.  

 

Screenshot: 

 

Sample link: https://stackblitz.com/edit/angular-pc9uwl?file=src/app/app.component.html 

Kindly revert us, if you have any concerns. 

 

Regards, 

Baby. 

[Gabriel Alva]

Hi Baby, thank you very much again for your help, that's exactly what I needed. I'll start working with your sample project.

Kind regards,
Gabriel

[Srihari Muthukaruppan]

Hi Gabriel,  

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M