Enhance your Highcharts Areaspline chart by adding a hover effect to highlight a column

Having trouble figuring out how to highlight a column on an area spline. I looked into Chartjs and Highcharts but couldn't find any solutions. I want to highlight the x-axis column up to the chart curve. Currently, I'm using Crosshair in my code, but it's not quite giving me the desired result.

xAxis: {
        allowDecimals:false,
        min: 1,
        max: 12,
        categories: ['', 'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC', ''],
        labels: {
            y: -10,
            style: {
                color: '#66717c',
                fontSize: '13px'
            }
        },
        tickWidth: 0,
        lineColor: "#fff",
        crosshair: {
            width: 60,
            color: 'rgba(73,168,222,0.5)',
            zIndex: 5
        }
    },
    yAxis: {
        title: {
            text: ''
        },
        gridLineWidth: '0',
        visible: false
    }

My current result is shown above, but what I need is something different. Does anyone have a solution for this issue?

javascriptjqueryhtmlcsshighcharts

Answer №1

To achieve a stacked series on top of the real series with percent stacking, consider using partially transparent area fill and positioning the crosshair under the series. Create a fake series to cover parts of the crosshair that need to be hidden.

Here's an example: http://jsfiddle.net/aft9esqr/

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

Variables related to the environment within babel.config.js

We are in need of adjusting specific configuration/variables within our React Native app (created with Expo) based on the environment (local/dev/staging/production). After exploring various libraries designed for this purpose, we have encountered issues th ...

javascripttypescriptexpobabeljs

Attempting to align a header and an unordered list side by side

I'm feeling a bit lost here and I've been doing my best to find a solution online, but no luck so far. What I need help with is getting my header element and unordered list to appear on the same line without losing their respective margins. ...

htmlcssheaderhtml-lists

What is the best way to send a POST request using $.ajax() to an ASP.NET WEB API

Every time I hit the WEB API method, I keep encountering a null parameter. What could be the issue? var product = { name: "productA", Id: 22 }; $.ajax({ url: 'http://localhost:50175/api/values/', type: 'POST', data: produc ...

c#jqueryasp.netajaxasp.net-web-api

What is the best way to exclude React.js source files from a fresh Nest.js setup?

My setup includes a fresh Nest.js installation and a directory named "client" with a clean create-react-app installation inside. Here is the project structure: ./ ...some Nest.js folders... client <- React.js resides here ...some more Nest.js fo ...

javascriptreactjstypescriptnestjstsconfig

objects bound to knockout binding effects

I have been struggling to understand why the binding is not working as expected for the ‘(not working binding on click)’ in the HTML section. I have a basic list of Players, and when I click on one of them, the bound name should change at the bottom of ...

javascriptknockout.js

Attempting to implement a brief pause before revealing the outcome of the Rock, Paper, Scissors game

I want to enhance the realism of my game, but I am uncertain about when and how to utilize the setTimeout/setInterval method. Additionally, I am running out of ideas on what else I can try. constructor() { super(); this.state = { ...

javascriptreactjsjsx

What is the best method for showcasing two images side by side in a column layout?

I need to showcase 2 images in a row using AngularJS, with the next two images in the following row and so forth. Img1 Img2 Img3 Img4 This is my code: <section id="content"> <div class="content-wrap"> <div class="container clearfix "& ...

htmlcssangularjstwitter-bootstrap

What steps can be taken to resolve the issue of "Access Denied: Invalid token, incorrect code"?

Assigned to me recently for a school project is a coding challenge that consists of various parts. The final task involves uploading to a private GitHub repository and submitting a completion request through a POST request under specific conditions. I hav ...

javascriptnode.jsjsonrfctotp

Substitute terms with the usage of array map

Here is an array for you (2) ['beginning=beginner', 'leaves=leave'] as well as a string its beginner in the sounds leave that has been converted to an array using the following code var words = text.split(' '); My goal ...

javascriptjquerytypescript

intl-tel-input's getExtension function is returning a value of 'null'

I've been attempting to retrieve the extension of the mobile number that has been input. All other variables are functioning correctly, but the extension variable is returning a null value. It appears that it is sending a null value to the POST method ...

javascriptjqueryintl-tel-input

Every time a GET request is made to the same route in Express.js, it seems to be stuck in a

Currently, I am working on an express application that requires a landing page to be rendered for the '/' route. This landing page consists of a text box and a submit button. The desired functionality is such that when a user enters some text int ...

javascriptnode.jsexpress

React-Collapsible Compilation Error

Currently, I am working on a project that involves Spring and ReactJS. I am still new to front-end development. One of the tasks I am trying to accomplish is creating a simple accordion using "REACT-COLLAPSIBLE". The code I have written is quite straight ...

javascriptjavareactjsdependenciesreact-component

What is the best way to handle a struct coming from a cfc in jQuery?

Need help with my cfc <cffunction name="addEditPerson" access="remote" returntype="struct"> a lot of cfarguments <cfscript> var returnThis = structNew(); var error = ''; structInsert(returnThis,&a ...

jquerycoldfusionstructcfc

Customizing validation rules in Nest.js

Here is a representation of the data shape: { "saturday": [ { "start": "10:00 AM", "end": "12:00 AM" } ], "sunday": [], ... } This structure defines my time-slot.interf ...

javascriptnode.jsvalidationnestjsclass-validator

Encountering difficulty when integrating external JavaScript libraries into Angular 5

Currently, I am integrating the community js library version of jsplumb with my Angular 5 application (Angular CLI: 1.6.1). Upon my initial build without any modifications to tsconfig.json, I encountered the following error: ERROR in src/app/jsplumb/jspl ...

javascripttypescriptnpmangular-cliangular5

Finding the sum of values in the aggregate row of an ng-grid table

In my ng-grid, I have organized metrics from three different computers into columns named name, value, and machine. Instead of displaying three lines for each metric, I utilized the groups: ['name'] setting in the gridOptions. However, I am strug ...

javascriptangularjsng-grid

What could be causing my PrimeReact dropdown component to ignore the custom class styles?

Within my Project, I am utilizing multiple Prime React dropdown components and I am aiming to customize one of them with a unique style. In my CSS, I have established global styles to overwrite the default settings for all the dropdowns. However, when tryi ...

javascripthtmlcssreactjsprimereact

Ways to resolve issues with v-model rendering errors

I currently have code fragments within my index.blade.php file that look like this: The content section: . . . <div class="col-12 col-md-12 mb-3"> <label for="attachment" text-muted">Attachment</label> &l ...

javascriptvue.js

Is there a way to distinguish mouseout/leave events based on the side in jQuery?

How can I detect if the mouse event has moved away from a particular side of an element? For example, I have a DIV with a mouseover/mouseenter event and I only want to activate the action when the mouse leaves from the left or right side of the DIV. If it ...

javascriptjquery

Convert the content of a Multiline Edit Box into HTML format for sending in an email using xpages

I stumbled upon some amazing javascript code (xpHTMLMail file) that allows users to create an HTML email on the fly from an xpage document where they write a review of a salesperson. However, I encountered an issue with Multiline edit boxes which contain c ...

htmlxpages