Set marker symbol for each category in line chart

[harikm007]

Different marker symbols can be set to line chart based on its value (Y-axis) using this script. But in some cases we may need to set icons for each category (X-axis), Here is a script to achieve this

https://www.binextlevel.com/post/set-marker-symbol-for-each-category-in-line-chart

Steps:

1. Create line chart and enable marker in design panel

2. Add below script to widget and update the variable 'categoryLogoMapping' with name of items in X-axis and its logo URL

3. Save script and refresh widget

categoryLogoMapping = {'Google': 'https://www.svgrepo.com/show/303108/google-icon-logo.svg',
					 'Apple': 'https://www.svgrepo.com/show/303110/apple-black-logo.svg',
					 'Twitter': 'https://www.svgrepo.com/show/303127/twitter-logo.svg',
					 'Facebook': 'https://www.svgrepo.com/show/303114/facebook-3-logo.svg',
					 'Whatsapp': 'https://www.svgrepo.com/show/303150/whatsapp-symbol-logo.svg'}

widget.on('processresult', function(se, ev){
	ev.result.series[0].lineWidth = 0 //To disable connected line between markers
	$.each(ev.result.series[0].data, function(index, value){
			value.marker.symbol= `url(${categoryLogoMapping[value.selectionData[0]]})`
			value.marker.width= 25
			value.marker.height= 25
	})
	
})

Related posts:

Line chart with image/icon markers

Apply conditional colors to Markers in Line chart

[ajque]

is there a way to simply make the current markers smaller? thank you!