So what i am trying to achieve is that, there should be a checkbox before the value in the xAxis and it should call my test() vue method when the checkbox is changed by clicking on it. Right now it is calling test() when buildChart() method is called.
buildChart() {
const context = this;
return {
chart: {
height: 500,
type: 'columnrange',
inverted: true,
spacingLeft: 10,
spacingRight: 10,
},
xAxis: {
showEmpty: false,
title: null,
type: 'category',
labels: {
useHTML: true,
formatter() {
// This is where i am rendering the checkbox, would like it to trigger my vue function which is within the current vue context.
return `<input type='checkbox' onchange='${context.test(this.value)}'> ${this.value}`;
},
},
},
};
}
test(value) {
console.log(value);
}
This won't work, returned value from a formatter function is treated as a string.
As a solution, you can store a label's value in a data-* attribute and add change event after the chart is created.
export default {
methods: {
test(value) {
console.log(value);
}
},
data() {
const context = this;
return {
chartOptions: {
chart: {
events: {
load: function() {
const labelGroup = this.xAxis[0].labelGroup;
const checkboxes = labelGroup.div.getElementsByTagName('input');
for (const checkbox of checkboxes) {
checkbox.addEventListener('change', function(e){
context.test(this.dataset.value);
})
}
}
}
},
xAxis: {
showEmpty: false,
title: null,
type: 'category',
labels: {
useHTML: true,
formatter() {
return `<input type='checkbox' data-value=${this.value}> ${this.value}`;
}
}
}
}
};
}
};
Live demo: https://codesandbox.io/s/highcharts-vue-demo-fork-j4ty16?file=/src/components/Chart.vue