Different image for each point in chart?

[Scott Price]

Hello,

Is it possible to specify a different image for each point in a chart? In the pointRender method, I'm setting args.point.marker.imageUrl to be distinct but that doesn't seem to work.

Thanks 

[Srihari Muthukaruppan]

Hi Scott, 

 

Based on the provided details we have tried to provide individual marker for image using pointRender event and it is working fine. Unfortunately we are unable to reproduce the reported scenario in the latest version of the chart 19.1.64. Please find the sample used for testing and screenshot for your reference. 

 

Sample: https://stackblitz.com/edit/angular-ueq6vg-ye7xcz?file=app.component.ts 

 

Code Snippet: 

// add your additional code here 

<ejs-chart style='display:block;'[chartArea]='chartArea' align='center' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' 

                [title]='title' [tooltip]='tooltip' (textRender)='textRender($event)' (pointRender)='pointRender($event)' (load)='load($event)'(loaded)='loaded($event)'> 

                <e-series-collection> 

                    <e-series [dataSource]='data4' type='Line' xName='x' yName='y' fill = 'blue' [marker]='marker' width=2> </e-series> 

                </e-series-collection> 

            </ejs-chart> 

// add your additional code here 

 

 

public pointRender(args: IPointRenderEventArgs): void { 

    if (args.point.index == 1) { 

      args.series.marker.imageUrl = 'https://ej2.syncfusion.com/demos/src/tab/images/employees/8.png'; 

    } else if (args.point.index == 2) { 

      args.series.marker.imageUrl = 'https://ej2.syncfusion.com/demos/src/tab/images/employees/1.png'; 

    } 

  } 

 

Screenshot: 

 

 

If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner. 

 

1. Try to reproduce the reported scenario in the provided sample.   (or)
2. Share the package version used in the chart.

 

Regards, 

Srihari M 

[Scott Price]

Thanks, it seems to be working now.

A new issue is when hovering over the image, the wrong image is overlaid. Is there a way to customize the hover image?

[Srihari Muthukaruppan]

Hi Scott, 

 

We are able to reproduce the reported scenario. Based on your request we have logged a bug task on this. You can keep track of it from the below feedback portal link.  

  

Feedback Link: https://www.syncfusion.com/feedback/25604/different-image-displayed-on-hover-over-the-marker 

 

This fix will be available in our weekly patch release which is scheduled to be rolled out on or before 8 June 2021. We appreciate your patience until then. 

 

Regards, 

Srihari M 

[Srihari Muthukaruppan]

Hi Scott, 

 

Sorry for the inconvenience. 

 

Due to some technical difficulties we are unable to include the fix in our patch release. We will include the fix in our upcoming weekly patch release which is scheduled to be rolled out on or before June 22 2021. We appreciate your patience until then. 

 

Meanwhile we will provide the custom package for the reported scenario on or before June 17 2021. 

 

Regards, 

Srihari M 

[Srihari Muthukaruppan]

Hi Scott,   

 

We have fixed the reported scenario. Since the fix is in the testing stage, we couldn’t include it in our last weekly release. As promised we are sharing a custom package of the fix below and we will include the fix in our upcoming weekly release which is scheduled to be rolled out on or before 22 June 2021. And also we suggest you to use below code snippet to overcome the reported scenario. We appreciate your patience until then.  

   

Custom Package: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Scatterfix_Angular_custom-1558609133.zip 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MarkerImage-98557463.zip 

 

Code Snippet: 

// add your additional code here 

 

public pointRender(args: IPointRenderEventArgs): void { 

        if (args.point.index === 1) { 

          args.point.marker.imageUrl = 

            'https://ej2.syncfusion.com/demos/src/tab/images/employees/8.png'; 

        } else if (args.point.index === 2) { 

          args.point.marker.imageUrl = 

            'https://ej2.syncfusion.com/demos/src/tab/images/employees/1.png'; 

        } 

      } 

 

// add your additional code here 

 

 

Kindly replace the above chart package in your sample and let us know your feedback.  

   

Regards,   

Srihari  

[Scott Price]

Thank you!

[Srihari Muthukaruppan]

Hi Scott,

Most welcome.

We will let you know, once this fix had been included in our weekly release as promised. We appreciate your patience until then.  

  

Thanks,  

Srihari

[Srihari Muthukaruppan]

Hi Scott, 

 

The release of our weekly patch has been postponed. Since our volume 2 release has been scheduled by the end of June 2021. Hence the fix will be available in our volume 2 release. Until then we suggest you to use the provided custom nugget to overcome the reported scenario. 

 

Regards, 

Srihari M 

[Srihari Muthukaruppan]

Hi Scott, 

  

We are glad to announce that our Essential Studio 2021 Volume 2 release v19.2.0.44 is rolled out and is available for download under the following link. 

  

Essential Studio 2021 Volume 2 Main Release v19.2.0.44 is available for download | Announcements Forums | Syncfusion 

 

Sample: https://stackblitz.com/edit/angular-ueq6vg-ye7xcz?file=app.component.ts 

 

Screenshot:  

 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

  

Regards,            

Srihari M