top of page

Set marker symbol for each category in line chart

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



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
	})
	
})

74 views0 comments

Recent Posts

See All
bottom of page