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