Best method for highlight highest and lowest data point

[Glen Alexander]

Hi,

What's the best method for highlighting the highest and lowest numbers in data in a line chart? Say, making the highest number's point green, and lowest red for instance.

[Durga Gopalakrishnan]

Hi Glen, 

Greetings from Syncfusion. 

We have analysed your query. We suggest you to use pointColorMapping property to map the colors specified for each point in a series. We have changed assigned color for maximum and minimum point using load event.  

<ejs-chart (load)='load($event)'> 

    <e-series-collection> 

         <e-series pointColorMapping='color' > </e-series>                

   </e-series-collection> 

</ejs-chart> 

 

public load(args: ILoadedEventArgs): void { 

            for (var i = 0; i < args.chart.series.length; i++) { 

                var points = args.chart.series[i].dataSource; 

                var max = Math.max.apply(Math, points.map(function(o) { return o.y; })) 

                 var min = Math.min.apply(Math, points.map(function(o) { return o.y; })) 

                for (var j = 0; j < points.length; j++) { 

                    if (points[j].y == max) 

                        points[j].color = "red"; 

                    else if(points[j].y == min) 

                        points[j].color = "green"; 

                } 

            } 

    }; 

 

https://stackblitz.com/edit/angular-zckjku-3gikhm 

Please revert us, if you have any concerns. 

Regards, 

Durga G