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


  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': '',
					 'Apple': '',
					 'Twitter': '',
					 'Facebook': '',
					 'Whatsapp': ''}

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

77 views0 comments

Recent Posts

See All


bottom of page