Obtaining the chart object within a point event function in Highcharts can be achieved by accessing the

Is there a way to modify the code below so that I can retrieve the value of the point in the first series even when clicking on a point in the second series? I only need access to the chart object, but I'm not sure how to achieve this since within the mouseOut function, this refers to the point object and not the chart object.

$(function () {
    $('#container').highcharts({
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            // I need to retrieve the y value of the point in the
                            // first series even if this function is called for a point in the second series
                            alert('value: ' + this.y);
                        }
                    }
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
            },{
            data: [135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

JSfiddle page

Answer №1

As outlined in the documentation:

The keyword "this" pertains to the Point object.

In addition, the Point has a property known as series that contains the chart:

series: {
    cursor: 'pointer',
    point: {
        events: {
            click: function() {
                var chart = this.series.chart;
            }
        }
    }
}

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 there a way to incorporate an image as a texture onto a ply model using three.js?

Can someone help me figure out how to properly load a texture for a 3D model in a ply format? I'm working on an HTML file where I'm using three.js along with plyloader.js to load the model. However, I'm having trouble loading the texture co ...

Can README docs be prioritized to appear before all other stories in Storybook navigation?

Organizing my Storybook stories is important to me. I like to nest all my stories under a “Docs” header, with each component having a README mdx file followed by its stories. My preferred order is to always have the README appear first in the navigatio ...

WebApp specifically designed for iPads that mimics the functionality of a swipe

I am in the process of developing a full-screen web application for an iPad that will showcase a series of images in a slider format. The users should be able to swipe between the images and click on one to view it in detail. Below is an example showcasin ...

Having trouble fetching information from SharePoint list within specific date range using JavaScript CAML query

When I use CAML JavaScript to retrieve data from a SharePoint list between two dates, I encounter an issue. I am able to retrieve data successfully if the two dates fall within the same month, however, if the dates are in different months, no data is ret ...

The JavaScript for loop using .appendChild() is inserting the values of the final object, represented as [object object], into the HTML document

$(document).ready(function () { GetDetails(); }); function GetDetails() { let albumlist = document.getElementById("album-list"); $.ajax({ url: '/Store/browseajax', type: 'GET', data: { id: '@ ...

How can I ensure eventual access to an object created in a React componentDidMount function without utilizing a deferred in ES6 Promises?

Thank you in advance for any help. I am delving into the world of ES6 native promises for the first time after previously using Q or Angular's $q service. I encountered a situation where using a deferred would have been convenient, but I was surprise ...

Accessing a file's source using the Box.net API and downloading the file contents

Recently, I've been busy working on a Web Application project (for fun) that focuses on editing files stored in the cloud. I'm utilizing the box.net API for this task, but I've come across a challenge - obtaining the source code of files. Un ...

disabling swap button icons temporarily in Angular 16

I need assistance creating a function that removes an icon from a button and replaces it with a spinner provided by primeng. The function should only remove the child element. Code snippet for the button: <p-button label="" [loading]="lo ...

Can a component be passed as props and utilized within a child Component in Vue.js?

If we have components A, B, and C in a Vue 2.0 app, A declares, registers, and uses B. Can we pass C from A to B? For example: <template> <div class="A"> <B :child_component="C" /> </div> </template ...

Performing an AJAX request to the database when a change occurs, prior to submitting the

In my user setup/create form, I am including a field for the users' license/certification number which needs to be validated and returned to a specific DIV Onchange before the form is submitted. I have heard that using AJAX POST is the way to achieve ...

How can I retrieve the latest state of the Redux store in getServerSideProps in Next.js?

I am attempting to retrieve the most up-to-date redux state in getServerSideProps like so: export const getServerSideProps = async (ctx) => { const state = store.getState(); console.log(state.name); return { props: { login: false } }; }; H ...

What could be causing my code to fail in detecting the presence of a value within an array in JavaScript?

I am currently working on a JavaScript task that involves checking for the existence of a value in an array and then adding it to another array. Here is the setup: const originalArray = ["apple", "banana", "cherry", "date", "elderberry"]; let newArray = [ ...

What is the best way to unselect the "all" selector if one of the inputs is no longer selected?

I am facing an issue with a search filter functionality. When all filters are selected and then deselected individually or together, the "all" button remains selected. I need help in ensuring that when any filter is deselected, the "all" button also gets d ...

The function maybeStripe.apply is not defined

Greetings, Encountering a Stripe error in Gatsby upon page load Error: Uncaught (in promise) TypeError: maybeStripe.apply is not a function import React, { useEffect, useState } from 'react'; import { loadStripe } from '@stripe/str ...

Enhance the attributes of a collection of objects using values from a different array

Looking for a way to enhance a set of objects with properties sourced from another array? I have two arrays at hand. The first one contains a series of objects, while the second one consists of integers. My goal is to attribute a new property to each objec ...

Journeying through JSON: Presenting the value alongside its hierarchical parent

I'm completely new to JSON Path, so I'm not sure how complicated this could be, or if it's even possible. The JSON structure I have consists of multiple groups, each containing a set of fields. Both the groups and the fields have their own ...

What is the best way to retrieve data from the previous webpage and navigate it to the appropriate page using HTML?

I have a pair of HTML files known as list.html and detail.html. From https://jsonplaceholder.typicode.com/posts, I am retrieving title and body data to exhibit on a posts.html page in the following format: posts.html output Displayed below is my posts.ht ...

What could be causing the getElementById() function to malfunction?

Currently in the learning process, I am attempting to make a button perform an action - specifically displaying a message using the alert function. However, it seems that the method getElementById is not functioning as expected and I am unsure of the reaso ...

When you invoke a function within Angular 1.5 as a fresh component emerges

I have a component where clicking on a button triggers the invocation of another component. model.alert = function () { modalInstance = $uibModal.open({ template: '<abc-xyz return-value="model" on-cancel="Cancel()">& ...

Effective ways to transfer data between services and controllers

Is there a way to pass values from services to controllers effectively? Despite researching on stackoverflow, I haven't found a solution that addresses my issue. My goal is to access google spreadsheets using tabletop.js. Interestingly, when I log val ...