Highcharts feature enhancement: Adjusting zIndex of legendItem on mouseover/mouseout

I have a chart that includes a 'total' sum value series alongside other values.

My goal is to initially hide or place this 'total' column behind the others, and then bring it to the front when the series' legendItem is hovered over.

Thus far, I have been successful in increasing the zIndex on the series to bring the 'total' column to the front upon 'mouseover', but I am unable to trigger it to move back behind on 'mouseout', causing the 'total' column to remain in the front.

I also attempted a similar approach using .toFront(), which did work, but faced the same issue of moving the column back behind on 'mouseout'.

Is there a correct way to move this column to the front or back based on legendItem hover?

https://codesandbox.io/s/cold-night-9p0gk?file=/src/components/BarChart.vue:1272-1325

javascriptvue.jshighcharts

Answer №1

When the mouse moves out, the toFront method can be called on the stacked series only:

chart.series.forEach(s => {
    if (s.name === 'Total') {
        s.legendItem.on('mouseover', () => {
            s.group.toFront();
        });

        s.legendItem.on('mouseout', () => {
            s.chart.series.forEach(item => {
                if (s !== item) {
                    item.group.toFront();
                }
            });
        });
    }
});

Check out the live demonstration: http://jsfiddle.net/BlackLabel/mpduxwkh/

For more information, refer to the API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#toFront

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

Issue with the Ajax auto-complete feature in Internet Explorer

I am facing an issue with my "ajax suggestion list" getting hidden behind the "select menu" located right below the text box that triggers the ajax function. This problem only occurs in IE 6.0, while it works fine in other browsers. I have already disabled ...

javascriptcssajaxinternet-explorer

Rendering tables multiple times using VueJS

I need to display only 5 results from an API call, but currently getting more than that. I attempted using an index, but since it's conditional rendering and some results are skipped, the index isn't a viable solution. Is there a way to assign a ...

html-tablevue.jsrenderingconditional-rendering

Deactivate the ability to rename headers in Vue Bootstrap Table

Currently, I am incorporating b-table in vue-bootstrap with the following code snippet: b-table :fields="queryResult.columns" :items="queryResult.rows" The fields consist of: id, column_name, column_hide However, it automatically transforms 'column ...

vue.jsbootstrap-vue

Using the jQuery before() method to manipulate form fields

Is it possible to utilize the jQuery before method to insert a form? An example scenario could be as shown below: <script> $(document).ready(function() { $("button").click(function() { $("button").before('<form><input type="text ...

javascriptjqueryforms

After the rendering process, the React Component member goes back to a state of

One issue I encountered is related to a component that utilizes a separate client for making HTTP requests. Specifically, when trying to use the client within a click event handler, the call to this.client.getChannel() fails due to this.client being undefi ...

javascriptreactjstypescript

Select an image based on the input value provided

I'm new to coding and I'm attempting to replicate the search functionality of icomoon where typing a word displays related images. However, I'm facing an issue where I can't seem to get the value entered in the input field to trigger an ...

javascriptjquery

Error encountered when using the enter or return key with directive syntax

Newbie Alert I'm encountering something strange while attempting to create a custom directive in AngularJS. When I input this code: myModule.directive('myTab', function(){ console.log('--Inside TAB directive--'); return ...

javascriptangularjsangularjs-directivesyntax-error

What is the best way to link my JSON object to specific properties of my data object in vue.js?

I am currently using Vue.js for my frontend development and I have a JSON object that I need to map to set certain properties in my data(). I have confirmed that the server connection is working and that the JSON object is received properly. In my comput ...

javascriptjsonvue.jsvuejs2

Encountering a problem during the installation of the udev module in a Node.js

When I run the command below: npm install udev I encounter the following error message: npm WARN enoent ENOENT: no such file or directory, open '/home/mitesh/package.json' npm WARN mitesh No description npm WARN mitesh No repository field. ...

javascriptnode.jsnpmudevnode-serialport

JavaScript code to find a date within a specified range

I have developed a script that calculates the number of weeks between two specified dates. It then generates a table where the number of rows equals the number of weeks. The script can be viewed on JSFIDDLE Script: $('#test').click(function ...

javascriptjquerydate

When a td element is clicked, the Textbox will also be clicked

Similar Question: Dealing with jQuery on() when clicking a div but not its child $(oTrPlanning).prev().children('td').each(function () { this.onclick = setCountClick; }); When a TD element is clicked, the function setCountClick() i ...

javascriptjqueryhtmlcss

Building a versatile dropdown menu with ReactJS and creating reusable components

I am currently working on building a dropdown menu following a tutorial, but I have encountered a roadblock. Instead of using the "props" keyword as shown by the instructor in the tutorial, I passed the props directly as arguments without using props dot. ...

javascriptreactjsnext.js

Attempting to create a school project involving pizza, but encountering some technical difficulties

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>pizza ...

javascriptforms

Issue with Gulp and Browserify task: Why is there no output?

I've set up the following task in my gulpfile.js gulp.task('default', ['browserify']) gulp.task('browserify', function () { return browserify('./public/js/x.js') .bundle() .pipe(source('y.js& ...

javascriptnode.jsnpmgulpbrowserify

What is the method for accessing a marker from beyond the map on OpenStreetMap?

Recently, I made the switch from using Google Maps to OpenStreetMap in my project due to the request limit constraints imposed by Google. My client needed a higher request limit, but was unable to afford the costs associated with increasing it on Google Ma ...

phpjavascriptjquerydictionaryopenstreetmap

Unable to determine why node.js express path is not working

const express = require("express"); const app = express(); app.use(express.static("public")); var dirname = __dirname; app.get("/:lang/:app",function(req,res){ console.log(req.params.lang + " " + req.params.app); ...

javascripthtmlcssnode.jsexpress

changing a Vue.js boolean value through a template

Out of necessity (don't inquire further), I find myself resetting a variable in VueJS through a template. So, here's what it looks like in my VueJS code: const someApp = new Vue({ delimiters: ['[[', ']]'], el: '#some-app ...

vue.jsvuejs2

How can a JavaScript function be used to check a tag's status?

I currently have two select tags on my webpage. I want to ensure that only one option can be selected at a time from these two tags. If the user tries to select options from both tags, an error message should be displayed instructing them to choose only on ...

javascriptjqueryhtmldom

Is it possible to truly halt the execution of the readline function?

Exploring a scenario with the code snippet provided below, along with an input file and the resulting output. The setTimeout function is utilized to simulate an external call like an http get request. What would be the most effective or straightforward met ...

javascriptnode.js

React: The peculiar contradiction of useEffect with eventHandler props

Having trouble with this specific example. The issue arises with an Input component that includes an onChange prop to manage internal data changes. Under normal circumstances, if the value is updated externally, the onChange prop does not trigger since t ...

javascriptreactjsreact-hooksuse-effect