Sorting toolTip Content in Descending Order of dataPoint Y-Values | CanvasJS JavaScript Charts

Sorting toolTip Content in Descending Order of dataPoint Y-Values | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  exportEnabled: true,
  title:{
    text: "Sorting Values inside toolTip"             
  }, 
  axisY:{
    title: "Number of Medals"
  },
  toolTip: {
    shared: true,
    contentFormatter: function (e) {
      var content = "";

      e.entries.sort(function(a,b) {
        return b.dataPoint.y - a.dataPoint.y;
      });

      content	+= e.entries[0].dataPoint.label;
      content += "<br/>";

      var entries = e.entries;
      for(var j = 0; j < entries.length; j++) {
        content	+= "<span style=\"color:" + entries[j].dataSeries.color+"\"\>" + entries[j].dataSeries.name + " </span>: " + "<strong>" + entries[j].dataPoint.y + "</strong>";
        content += "<br/>"; 
      } 
      return content;

    }
  },
  legend:{
    cursor:"pointer",
    itemclick: toggleDataSeries
  },
  data: [{        
    type: "spline",  
    name: "US",        
    showInLegend: true,
    dataPoints: [
      { label: "Atlanta 1996" , y: 44 },     
      { label:"Sydney 2000", y: 37 },     
      { label: "Athens 2004", y: 36 },     
      { label: "Beijing 2008", y: 36 },     
      { label: "London 2012", y: 46 },
      { label: "Rio 2016", y: 46 }
    ]
  }, 
         {        
           type: "spline",
           name: "China",        
           showInLegend: true,
           dataPoints: [
             { label: "Atlanta 1996" , y: 16 },     
             { label:"Sydney 2000", y: 28 },     
             { label: "Athens 2004", y: 32 },     
             { label: "Beijing 2008", y: 48 },     
             { label: "London 2012", y: 38 },
             { label: "Rio 2016", y: 26 }
           ]
         },
         {        
           type: "spline",  
           name: "Britain",        
           showInLegend: true,
           dataPoints: [
             { label: "Atlanta 1996" , y: 1 },     
             { label:"Sydney 2000", y: 11 },     
             { label: "Athens 2004", y: 9 },     
     ...