Chart with Editable Legend Items - CanvasJS JavaScript Charts

Chart with Editable Legend Items - CanvasJS JavaScript Charts

HTML

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

<div id="chartContainer" style="height: 360px; width: 100%;" ondblclick="myMethod(this)"></div>

JavaScript

window.onload = function(){
  $("#legendEditor").hide();
  var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    title: {
      text: "Chart with Editable Legend"
    },
    subtitles: [{
      text: "Click on Legend to Edit"
    }],
    data: [{        
      type: "line",
      showInLegend: true,
      dataPoints: [
        { x: 10, y: 21 },
        { x: 20, y: 25 },
        { x: 30, y: 20 },
        { x: 40, y: 25 },
        { x: 50, y: 27 },
        { x: 60, y: 28 },
        { x: 70, y: 28 },
        { x: 80, y: 24 },
        { x: 90, y: 26 }
      ]
    },{        
      type: "line",
      showInLegend: true,
      dataPoints: [
        { x: 10, y: 31 },
        { x: 20, y: 35 },
        { x: 30, y: 30 },
        { x: 40, y: 35 },
        { x: 50, y: 35 },
        { x: 60, y: 38 },
        { x: 70, y: 38 },
        { x: 80, y: 34 },
        { x: 90, y: 44 }
      ]
    },{        
      type: "line",
      showInLegend: true,
      dataPoints: [
        { x: 10, y: 45 },
        { x: 20, y: 50 },
        { x: 30, y: 40 },
        { x: 40, y: 45 },
        { x: 50, y: 45 },
        { x: 60, y: 48 },
        { x: 70, y: 43 },
        { x: 80, y: 41 },
        { x: 90, y: 28 }
      ]
    },{        
      type: "line",
      showInLegend: true,
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }]
  });

  chart.render();

  var itemIndex = null;
  var offset = $("#chartContainer").offset();
}

function myMethod(e){
  alert(1)
}