Highcharts Chart with Multiple Category Selections

I'm facing some challenges in creating a multi-select column chart using highcharts. My objective is to allow users to select/deselect any category on the chart.

Expected Behavior:

  1. When a category (e.g. "0 - 1M") is clicked, both bars should change color. Clicking again should revert the color back.

  2. How can I notify an external app (AngularJS) about the selected columns?

I have tried using allowPointSelect: true, but it only selects one column instead of both columns within the category.

allowPointSelect: true,

I'm unsure about what steps to take next.

JSfiddle link - http://jsfiddle.net/w7dvrkhz/9/

If you have any ideas, please share them!

javascriptangularjshighcharts

Answer №1

1. By utilizing a callback function for the 

plotOptions.series.point.events.click
property, custom behavior can be easily implemented:

  point: {
    events: {
        click: function() {
        var clickedPoint = this,
            chart = clickedPoint.series.chart;

        chart.series.forEach(function(s) {
            s.points.forEach(function(p) {
            if(p.x == clickedPoint.x) {
              p.select(null, true);
            }
          });
        });
      }
    }
  },

Live demo: http://jsfiddle.net/kkulig/d37x5mo7/

allowPointSelect should be disabled while using the above code.

API references:

2. My knowledge of Angular is limited, however, the event mentioned in the first point seems suitable for checking currently selected points.

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

NextAuth credentials are undefined and authentication is malfunctioning in React

I encountered the following issue: https://i.sstatic.net/3VBoJ.png This is the code snippet that I am using: return ( <> {Object.values(providers).map((provider) => { if (provider.id === "credentials") { ret ...

javascriptreactjstypescriptfirebasenext-auth

PHP code not being detected by web form

After successfully creating a webform using Laravel on my localhost, I encountered an issue when transferring it to the server. The form no longer recognizes my PHP commands as expected. This is illustrated below. In my working model, my code includes Jav ...

javascriptphplaravel

Unable to retrieve ajax responseText within a jquery function

Seeking assistance with a form designed for user registration. Utilizing jQuery and AJAX to validate email address availability upon blur event. Employing e.preventDefault(); in JQuery code to prevent form submission in case of errors. However, encounterin ...

javascriptjqueryajax

How do you delete a particular select2 tag based on its index?

I successfully modified my select2 to accept tagged text with different values, for example: city-0, city-1, 2-city, city-3 ... However, I am now faced with the challenge of needing to remove a specific tag (city-2) The code snippet provided is not worki ...

javascriptjquery

Discovering the potential of utilizing the selected item from a drop-down menu to form a query and display the corresponding result

<?php $qry = " select * from `HX_tableService` "; $result = mysql_query($qry, $link); $serviceList = array(); while($row = mysql_fetch_array($result)) { $serviceList[$row['serviceID']] = $row['serviceName']; } echo "<se ...

javascriptphpjqueryhtmlajax

What is the proper way to encode/decode a file in JavaScript after it has been read and pass the data through ajax?

Having a django File field with the multiple attribute set to true, I am endeavoring to develop a multiple file uploader that retrieves file objects using a straightforward javascript FileReader object. Upon iterating through the file list, I extract the f ...

javascriptjqueryajaxdjangopython-2.7

What is the best way to have two text-divs overlapping within a single wrapper div?

In a wrapper div, there are two inner divs with different text. The goal is to change the text on hover and position the second text div exactly where the first text div is. .wrapper { background: red; width: max-content; padding: 20px; } .text1 ...

javascripthtmlcsshover

An embedded object is encountering an error due to an undefined value in the field of 'Math'

My approach involves using AJAX to dynamically load a YouTube video when the page is loaded. $(document).ready(function(){ $.ajax({ url : '/myurl', type:"post", data:{"d": $('#d_id').val()}, ...

javascriptjqueryajaxinternet-exploreryoutube

Using jQuery to update a label within a checkbox list

I'm facing a challenge in jQuery where I am attempting to dynamically replace labels with hyperlinks. Unfortunately, my current code doesn't seem to be working as expected. My goal is to assign a specific hyperlink to each list item based on its ...

javascriptjqueryasp.net

Do not attempt to log after tests have finished. Could it be that you overlooked waiting for an asynchronous task in your test?

Currently, I am utilizing jest in conjunction with the Vue framework to create unit tests. My test example is successfully passing, however, I am encountering an issue with logging the request. How can I resolve this error? Is there a mistake in my usage o ...

javascriptvue.jsunit-testingjestjs

Obtain the xlsx file transferred from a Node.js backend to an AngularJS frontend

I have successfully generated an Excel file from a JSON array of objects using json2xls in Node.js. The file is correctly formatted and stored on the server, but not in a public folder. Now, I am trying to send a response to the frontend so that users can ...

angularjsnode.jsdownload

reposition md-dialog labels on the fly

My tab dialog is not evenly arranged as shown below: https://i.sstatic.net/ghn4v.jpg Despite trying the flex directive, the tabs ("DESCRIPTION, MEANS,...) do not span the available space uniformly. Here is a shortened version of my HTML: <md-t ...

javascripthtmlangularjsflexboxangular-material

How can a Raycaster be utilized to retrieve the intersection coordinates from the perspective of the player's viewpoint?

I'm encountering difficulties in determining the coordinates of where the player is looking in the game world using a Raycaster. The intersections are not being picked up successfully. Specifically, I am attempting to retrieve the coordinates of the ...

javascriptthree.jsraycasting

Does the global $.ajaxSetup() function not impact $.ajax() calls within distinct functions?

Is it possible to make the effects of $.ajaxSetup() reach into function bodies? I'm having trouble getting $.ajaxSetup() to impact the $.ajax() calls within functions. Here is an example: In the code snippet below, the ajax request made by function f ...

javascriptajaxjquery

The file that was sent via HTTP was not fully completed

Attempting to transfer a binary file over HTTP using NodeJS and Express has presented some challenges with a file size of around 1.8 MB. The approach of reading the file with fs.readFile(..) and sending it using res.sendFile(..) through curl command succe ...

javascriptnode.jshttp

Scrolling the bottom of a PDF object element in HTML using JavaScript - a simple tutorial

There is a Pdf object displayed on my website <object data="data/test.pdf" type="application/pdf" width="700" height="900"> </object> I'm trying to automatically scroll this pdf to the last page when the page loads. I've found tha ...

javascriptjquerypdfpdfviewer

An automated feature that smoothly transitions a large image onto the screen

I came across a plugin, possibly a slideshow plugin, that smoothly slides a large image along the y-axis. It's hard to explain, but imagine the visible image is only 600px by 300px, while the actual image is 600px by 600px. This plugin would scroll t ...

javascriptjqueryslideshow

What is the best way to correctly render several React components using a single index.js file?

I am facing an issue with rendering two React component classes. One class creates a counter and works fine, while the other class generates a simple string wrapped in HTML tags but does not render. I have tried various tutorials to troubleshoot this probl ...

javascriptreactjs

The click function is only functioning for the most recently added div, failing to work on all previously appended divs in jQuery

Thank you to all the individuals who take the time to read my post and provide assistance. I am currently working on a select picker that displays the selected options below the select using ajax. However, I have encountered an issue where the 'x&apos ...

javascriptjquery

Utilize API information to populate a dynamic selection dropdown menu

Objective: Utilize an API to fetch data and then implement it in a dynamic select dropdown menu. The value should be set as the id and the label should be displayed as the name. Issue: How can you retrieve and incorporate the data into the select dr ...

javascriptreactjs