I have an Highchart in which I added a custom label('Show label') in export options.I have also added a click event on it.Now my requirement is, on click of that label I need to get the id(here its 'container') of that particular chart.I tried with jquery also but it was not working.Can anyone please help me.Here is the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<div id="container"></div>
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
exporting: {
menuItemDefinitions: {
// Custom definition
label: {
onclick: function () {
func();
this.renderer.label(
'You just clicked a custom menu item',
100,
100
)
},
text: 'Show label'
}
},
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
}
}
},
series: [{
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
function func(){
alert('Hello');
}
You can access the id of the rendered HTML element using the renderTo
method provided by Highchart. Your exporting section should be:
exporting: {
menuItemDefinitions: {
// Custom definition
label: {
onclick: function () {
chartId = this.renderTo.id
alert(chartId)
this.renderer.label(
'You just clicked a custom menu item',
100,
100
)
},
text: 'Show label'
}
},
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
}
}
}
You can pass the event
and context this
into the label click function handler.
label: {
onclick: function (event) {
func(event,this);
this.renderer.label(
'You just clicked a custom menu item',
100,
100
)
},
text: 'Show label'
}
function func(event,context){
console.log("chart id => ",context.renderTo.getAttribute('id'));
}
Updated Code
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
exporting: {
menuItemDefinitions: {
// Custom definition
label: {
onclick: function (event) {
func(event,this);
this.renderer.label(
'You just clicked a custom menu item',
100,
100
)
},
text: 'Show label'
}
},
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
}
}
},
series: [{
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
function func(event,context){
console.log("chart id => ",context.renderTo.getAttribute('id'));
}
Working jsFiddle demo - https://jsfiddle.net/sc0Lg4uh/1/
Check console.log for id of the container.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.