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.
check this fiddle - https://jsfiddle.net/Utx8g/901/
$(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 >= 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('<div id="flash"><div id="report"></div></div>', x , y +10, true).attr({
zIndex: 101
}).add();
}
}
},
title: {
useHTML: true,
align: 'left',
x: -5,
y: 8,
text: '<span class="chart-title"> Custom events <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
},
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]
}]
});
});
