For any support or more customized script, contact us -  binextlevel@gmail.com

Highlight Max and Min values in Line chart

Sometimes line chart contains more value points and it wont be readable if we enable the value labels. But it would be a nice feature to highlight minimum and maximum value in the chart to get a better understanding of value range in it. Here is a script to achieve this.



Steps:


  1. Create line chart and disable value label from design panel

  2. Add below widget script

  3. Save the script and refresh widget


widget.on('processresult', function(se, ev){ 
	
	let maxItem = Math.max.apply(Math, ev.result.series[0].data.map(function(el) { return el.y; }))
	let minItem = Math.min.apply(Math, ev.result.series[0].data.map(function(el) { return el.y; }))
	
	let maxfilterItems = ev.result.series[0].data.filter(el=>el.y == maxItem)
	let minfilterItems = ev.result.series[0].data.filter(el=>el.y == minItem)

	$.each(maxfilterItems, function(index, value){
		value.dataLabels = {
			enabled:true,
			borderColor: 'green',
			backgroundColor:'green',
			color: 'white',
			borderWidth: 1,
			borderRadius:3,
			padding: 3,
			style: {
				fontWeight: 'bold'
			}
		}
	
	})
	
	
	$.each(minfilterItems, function(index, value){
		value.dataLabels = {
			enabled:true,
			borderColor: 'red',
			backgroundColor:'red',
			color: 'white',
			borderWidth: 1,
			borderRadius:3,
			padding: 3,
			style: {
				fontWeight: 'bold'
			}
		}
	
	})
	
	
})

0 views0 comments

Recent Posts

See All