title: How can I inline edit xaxis/yaxis title in highcharts
body: <p>I want to inline edit x-xaxis/y-axis title on click of it.
  I read about custom-events plugin of highcharts.
  It gave me click event on axis title but how can I inline edit it and then update the axis title of chart on enter button click.</p>
  
  <p>check this fiddle - <a href="https://jsfiddle.net/Utx8g/901/" rel="nofollow noreferrer">https://jsfiddle.net/Utx8g/901/</a></p>
  
  <pre><code>$(function () {
  var lastUpdate = +new Date(),
      timeout = 3000;
  
  function reloadFlash() {
      $("#flash").fadeIn();
      lastUpdate = +new Date();
      setTimeout(hideFlash, timeout);
  }
  
  function hideFlash() {
      var now = +new Date();
      if (now &gt;= lastUpdate + timeout) {
          $("#flash").fadeOut();
      }
  }
  
  $('#chart').highcharts({
      chart: {
          renderTo: 'chart',
          borderRadius: 0,
          marginTop: 70,
          events: {
              load: function () {
                  //add report div
                  var ch = this,
                      x = 20,
                      y = 57;
  
                  ch.flashText = ch.renderer.text('&lt;div id="flash"&gt;&lt;div id="report"&gt;&lt;/div&gt;&lt;/div&gt;', x , y +10, true).attr({
                      zIndex: 101
                  }).add();
              }
          }
      },
      title: {
          useHTML: true,
          align: 'left',
          x: -5,
          y: 8,
          text: '&lt;span class="chart-title"&gt; Custom events  &lt;span class="chart-href"&gt; &lt;a href="http://www.blacklabel.pl/highcharts" target="_blank"&gt; Black Label &lt;/a&gt; &lt;/span&gt; &lt;span class="chart-subtitle"&gt;plugin by &lt;/span&gt;&lt;/span&gt;'
  
      },
      yAxis: [{
          title: {
              text: 'Values',
              events: {
                  dblclick: function () {
                      reloadFlash();
                      $('#report').html('dbclick on yAxis title');
                  },
                  click: function () {
                      reloadFlash();
                      $('#report').html('click on yAxis title');
                  },
                  contextmenu: function () {
                      reloadFlash();
                      $('#report').html('context menu on yAxis title');
                  }
              }
          },
          plotLines: [{
              value: 70
  
          }],
          plotBands: [{ // mark the weekend
              from: 100,
              to: 200
  
          }],
          labels: {
  
          }
      }, {
          opposite: true,
          linkedTo: 0,
          labels: {
  
          }
      }],
      xAxis: {
          title:{
              text: 'xAxis title',
              events: {
                  dblclick: function () {
                      reloadFlash();
                      $('#report').html('dbclick on xAxis title');
                  },
                  click: function () {
                      reloadFlash();
                      $('#report').html('click on xAxis title');
                  },
                  contextmenu: function () {
                      reloadFlash();
                      $('#report').html('context menu on xAxis title');
                  }
              }
          },
          labels: {
              rotation: -45
  
          }
      },
      plotOptions: {
          series: {
              dataLabels: {
                  enabled: true,
                  events: {
                      dblclick: function () {
                          reloadFlash();
                          $('#report').html('dbclick on datalabel');
                      },
                      click: function () {
                          reloadFlash();
                          $('#report').html('click on datalabel');
                      },
                      contextmenu: function () {
                          reloadFlash();
                          $('#report').html('context menu on datalabel');
                      }
                  }
              },
              events: {
                  dblclick: function () {
                      reloadFlash();
                      $('#report').html('dbclick on serie');
                  },
                  click: function () {
                      reloadFlash();
                      $('#report').html('click on serie');
                  },
                  contextmenu: function () {
                      reloadFlash();
                      $('#report').html('context menu on serie');
                  }
              },
              point: {
                  events: {
                      dblclick: function () {
                          reloadFlash();
                          $('#report').html('dbclick on serie point');
                      },
                      click: function () {
                          reloadFlash();
                          $('#report').html('click on serie point');
                      },
                      contextmenu: function () {
                          reloadFlash();
                          $('#report').html('context menu on serie point');
                      }
                  }
              }
          }
      },
      legend: {
  
      },
      series: [{
          data: [99.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135, 43]
      }, {
          type: 'column',
          data: [50, 16, 21, 11, 22, 12]
      }]
  });
  </code></pre>
  
  <p>});</p>