Dynamically Updating Data Series Legend - CanvasJS

Dynamically Updating Data Series Legend - CanvasJS

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer1" style="height: 360px; width: 100%;"></div>

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{      
  
     toolTip:{
        shared: true,
      },
      data: [
     
      {
        type: "stepLine",
        showInLegend: true,
         name:'StepSeries',
       axisYType:'primary',
        dataPoints: [
        { x: 10, y: 1 },
        { x: 20, y: 0},
        
        { x: 40, y: 1 },
        { x: 50, y: 0 },
        { x: 60, y: 0 },
        { x: 70, y: 1 },
        
        { x: 90, y: 1}
        ]
      }
      ]
    });

 chart.render();
var chart1 = new CanvasJS.Chart("chartContainer1",
	{      
  
     toolTip:{
        shared: true,
      },
      data: [
      {
        type: "line",
        mouseover: onClick,
        name:'Dataserie Y2',
        showInLegend: true,        
       axisYType:'secondary',
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
        ]
      },
      {
        type: "line",
        showInLegend: true,
        mouseover: onClick,
         name:'Dataserie Y1',
       axisYType:'primary',
        dataPoints: [
        { x: 10, y: 41 },
        { x: 20, y: 65},
        
        { x: 40, y: 75 },
        { x: 50, y: 35 },
        { x: 60, y: 88 },
        { x: 70, y: 28 },
        
        { x: 90, y: 24}
        ]
      }
      ]
    });

 chart1.render();
 function onClick(e){
 chart1.options.data[e.dataSeriesIndex].legendText = e.dataSeries.name + " = " + e.dataPoint.y;
                chart1.render();
 }//var updateCount = 0;
//setInterval(function(){  
  //  chart.options.data[0].legendText = "DS1 Update " + (updateCount + 1);
  //  chart.options.data[1].legendText = "DS2 Update " + (updateCount + 1);
  //  chart.render();
    
 //   updateCount++;
//}, 2000);