nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

How to show marker image in line chart

Hi Team,

I wanted to show marker image for line chart on multiple points. But my markers image is not showing in line chart.

I have created demo in below link
https://jsfiddle.net/nilesh_nagdeve007/y6wb3k9m/13/

I took the reference from below link :
http://jsfiddle.net/pawel_dalek/oLh69sgp/1/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How to show marker image in line chart

Hi nilesh.nagdeve!
We appreciate you reaching out to us!

You tried to use an event load inside the series object and there is no event like that. All you have to change is to use load event on the chart, so in chart.events.load.

Demo: https://jsfiddle.net/BlackLabel/bsqe4ymv/
API Reference: https://api.highcharts.com/highcharts/chart.events.load

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: How to show marker image in line chart

Hi Hubert.K

Thank you for your solution . It works for me.
In addition to this i want to keep some space between image and line (Need to place image below line).

Demo :
https://jsfiddle.net/nilesh_nagdeve007/y6wb3k9m/16/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How to show marker image in line chart

nilesh.nagdeve,
Actually, you cannot change the position of the marker, because as the name says, it is the marker directly on the point. To show the image below the point you can use Highcharts SVG Renderer and just render an image in the correct position. Please, check the demo below to see an example.

Demo: https://jsfiddle.net/BlackLabel/ao75bqks/
API Reference: https://api.highcharts.com/class-refere ... erer#image

Regards!
Hubert Kozik
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: How to show marker image in line chart

Hi Hubert.K
Thank you for suggestion ,

Here i wanted to show image on condition w.r.t "BaseWeek == 1" from splineData dataset ,
Inside splineData we have data object and within this object we have BaseWeek flag .
And i need to load image file from my assets folder.

Demo : https://jsfiddle.net/nilesh_nagdeve007/sq2pzkc9/17/
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: How to show marker image in line chart

Hi Hubert.K

I am loading plot option along with image in line chart , but image is not showing in line.
In addition to this, i wanted to show image on condition w.r.t "BaseWeek == 1" from splineData dataset ,
Inside splineData we have data object and within this object we have BaseWeek flag .
And i need to load image file from my assets folder.

Demo : https://jsfiddle.net/nilesh_nagdeve007/sq2pzkc9/20/
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: How to show marker image in line chart

Hi Hubert.K,

In addition to this , we are using plot option also in same event load function , So , because of this i think image is not loading

Demo : https://jsfiddle.net/nilesh_nagdeve007/sq2pzkc9/20/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How to show marker image in line chart

nilesh.nagdeve,
You had an error in your console because variable plotBands was not declared in your demo. To show an image only on specific conditions all you have to add is an if statement before creating an image.

Demo: https://jsfiddle.net/BlackLabel/csry2edL/

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”