Forum Discussion

nazeer475's avatar
nazeer475
Data Storage
11-02-2022

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

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

Replies have been turned off for this discussion
  • Harry's avatar
    Harry
    Cloud Apps

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

    Please let me know if you have any questions

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