cancel
Showing results for 
Search instead for 
Did you mean: 

Highlight Max and Min values of a Line chart using JS or Formula

nazeer475
7 - Data Storage
7 - Data Storage

Hi Team,

I need a hep, I have a line chart with one series and I need to highlight Max and Min values in the same chart.

Could you please help me how to achieve this. 

Thanks

SNH

1 REPLY 1

Harry
9 - Travel Pro
9 - Travel Pro

Hello @nazeer475 ,

Using below script you can highlight min and max value in a line chart. You can use different styles for min and max labels.

widget.on('processresult', function(se, ev) {

    maxItem = Math.max.apply(Math, ev.result.series[0].data.map(function(el) {
        return el.y;
    }))
    minItem = Math.min.apply(Math, ev.result.series[0].data.map(function(el) {
        return el.y;
    }))

    maxfilterItems = ev.result.series[0].data.filter(el => el.y == maxItem)
    minfilterItems = ev.result.series[0].data.filter(el => el.y == minItem)

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

    })


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

    })


})

Harry_0-1667394837809.png

Please let me know if you have any questions

Always here to help,
Harry from QBeeQ
[email protected]
www.qbeeq.pl