Guide on how to invoke a Vue method within the xAxis.labels.formatter() function in Highcharts

My goal is to have a checkbox displayed before each value on the xAxis, and when this checkbox is clicked, it should call my test() method in Vue. Currently, the test() method is being called when the buildChart() method is executed.

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() {
              // The checkbox is rendered here and should trigger the vue function within the current component context.
              return `<input type='checkbox' onchange='${context.test(this.value)}'> ${this.value}`;
            },
          },
        },
     };
}
test(value) {
console.log(value);
}

Answer №1

This approach may not be effective, as the returned value from a formatter function is interpreted as a string.

To resolve this issue, consider storing the label's value in a data-* attribute and including a change event after the chart has been generated.

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}`;
            }
          }
        }
      }
    };
  }
};

Here is a live demonstration: https://codesandbox.io/s/highcharts-vue-demo-fork-j4ty16?file=/src/components/Chart.vue

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the fetch function returning data in a format that is not ideal?

I am having trouble understanding the behavior of my code. I am attempting to load data using the code provided below. However, when the 3 commented-out lines are uncommented, the console.log displays an empty array [], and the remaining code fails to func ...

Tips for organizing nested reactive data in VUE

It seems like a common issue arises when fetching a list from an API and then displaying it. You need to create a list of checkboxes for each item in the list, but the checked property needs to be handled carefully. <div v-for="item in items"> & ...

How to apply props conditionally in VueJS?

I have a component called blogPost (Component A) that is imported in another component named B. When a button in Component B is clicked, Component A opens in a modal. There are two different use cases for this scenario. 1. One case requires passing 2 prop ...

Simultaneous beforeSave actions permitting repetitions

To prevent certain objects from being created, I incorporated a conditional in the beforeSave cloud function of that object type. However, when two objects are created at the same time, the conditional fails to work as expected. Check out my code snippet ...

Blade file not displaying Vue component as expected

I recently started working on a new project using Laravel and Vue, and I've run into a bit of a roadblock. The example component that came with the app is functioning perfectly, but the one I created isn't. Below is a breakdown of my file structu ...

Is there a way to transform a number that begins with a zero, such as 00111, into a string represented as '00111'?

Let's say I have the following JavaScript code snippet: let num = 00111; console.log(num.toString()); Executing this code would result in '73' being displayed. However, my desired output is to see '00111' instead of '73.&apo ...

Tips for transferring a dataTable from C# code behind to jQuery

I am trying to pass a string as a table of data from C# code behind to jQuery using two functions: C# [System.Web.Services.WebMethod(EnableSession = true)] public static List<ListItem> GetImageArray(string AccNo) { string result = string.Empty; ...

Discovering the parent route details of the current route from within a component

I am facing an issue where I need to identify the parent route /products while working within the scope of the FeaturedProducts.vue component. The current route path for this component is set as /product-list/featured const routes = [ { path: "/ ...

v-if not being updated in real-time within a v-for iteration

Issue Resolved -- Solution Provided Below I encountered an issue in Vue2 where I was attempting to manage a v-if and v-else based on an @click event within a v-for loop. However, the v-if did not dynamically change with each click as expected. Below is t ...

Tips for updating the value of an input text field in one HTML table according to a certain value entered in a different input text field located in another HTML table

I am working with an HTML table that consists of one row. Within this row, there are two TDs which each hold their own tables (each containing 10 rows with 10 input fields). My goal is to update the value of another corresponding text field based on change ...

How do I go about adding a specific class to every row within a Vue.js table?

I have an html table structured like this : <tbody> <tr v-for="employee in employees" :key="employee.EmployeeId" @dblclick="rowOnDblClick(emplo ...

Managing sessions and cookies for Firefox forms

On my webpage, there is a poll form where users can vote and see the results through an ajax request. When a user votes, a cookie is created to prevent them from voting again upon returning to the page. However, I have encountered an issue with Firefox wh ...

What is the technique for showing text in two different colors through a script?

What is the method to alternate text colors using a script? Display the text in color #ccc for 1 second, then switch to color #000 for 1 second, and finally return to color #ccc for 1 second (repeating in a loop). ...

Refreshing the value of multiple radio buttons and sending them via AJAX

I have a group of radio buttons here. <input class='required' type='radio' name='Tbl' id='get_this1' value='tbl_a'> <input class='required' type='radio' name='Tbl' id ...

Simply interested in extracting the JSON Class specifically, not all of the data

Looking for a way to extract only text from a specific class using $.getJSON and YQL. Currently, it retrieves all data and removes tags. Is there a method to achieve this? function filterData(data){ // remove unwanted elements // no body tags ...

Ways to set values for attributes

I am seeking guidance on how to set values for the properties foo and greetingMessage App.vue: <template> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> < ...

Issue with routing in a bundled Angular 2 project using webpack

Having a simple Angular application with two components (AppComponent and tester) webpacked into a single app.bundle.js file, I encountered an issue with routing after bundling. Despite trying various online solutions, the routing feature still does not wo ...

Plunker is displaying the same code, but unfortunately, it cannot run due to an "ERROR: mixed

I'm having trouble with a code I copied from a Plunker example. It's not working as expected. The code is from this Plunker example: http://embed.plnkr.co/xCyDvQ/ I copied and pasted it into my own Plunker creation, but as you can see in my Plu ...

What is the most effective method to exhibit every element within a content wrapper at a specific interval of time?

I am looking for a way to display each div within the content-wrapper after a specific time interval. Currently, I am using individual classes like el1, el2, el3, ... to accomplish this task. However, when dealing with content-wrappers containing multipl ...

How can you automatically show the current time upon entering a page using React Native?

Is there a way to automatically display the current time when a user enters the page? I currently have code that only shows the current time when the TouchableOpacity is pressed, but I want it to update automatically as soon as the user arrives on the Ne ...