Is there a way to highlight just one column and unhighlight any previously highlighted columns in an amCharts 4 Column chart?
I've been attempting to adjust the colors of all the columns before highlighting the target column, but it doesn't seem to be working correctly.
series.columns.template.events.on("hit", function(ev) {
ev.target.fill = am4core.color("red");
chart.invalidate();
});
To achieve this, you can utilize the active state feature:
var activeState = series.columns.template.states.create("active");
activeState.properties.fill = am4core.color('red');
By incorporating the hit event, you can designate columns as active. To ensure smooth transitions, you can reset the previous selection before activating a new column:
var currentActive;
series.columns.template.events.on("hit", function(ev) {
if (currentActive) {
currentActive.isActive = false;
}
currentActive = ev.target;
currentActive.isActive = true;
});
If you prefer not to store the last choice, you can deactivate all columns before selecting a new one:
series.columns.template.events.on("hit", function(ev) {
series.columns.values.forEach(c => c.isActive = false);
ev.target.isActive = true;
});
For the option to deselect all columns, you can enhance the second method like so:
series.columns.template.events.on("hit", function(ev) {
series.columns.values
.filter(c => c !== ev.target)
.forEach(c => c.isActive = false);
ev.target.isActive = !ev.target.isActive;
});
You can view a demonstration of this functionality on CodePen. Simply customize the code snippet to suit your requirements.
I am trying to combine two arrays in PHP: Array1 = [123,456,789]; Array2 = [1,2,3]; The desired combination should look like this: Array3 = [[123,1],[456,2],[789,3]]; In Javascript, I can achieve this using the push() function within a for loop: Arra ...
I am currently working on a code to choose departure date and return journey date, but I am encountering an issue where the return journey date is not being selected. The driver seems to be skipping over the return date selection and proceeding directly to ...
Why am I struggling? After dedicating 6 months to learning React.js, I find myself overwhelmed by the multitude of chapters and feeling lost. Could you kindly share your journey with React.js in a step-by-step manner? Your advice would be greatly apprecia ...
I am attempting to send JSON string encoded data to the PHP backend. In order to achieve this, I am utilizing a GET parameter with URL encoded JSON data in the form of an array similar to this: ["mystring1","mystring2"] However, when I try to decode it us ...
After extensive research on SO and the wider web, I'm struggling to find a solution. I have devised two components, Link and Button. In short, these act as wrappers for <a> and <button> elements with additional features like chevrons on t ...
UPDATE: I've been informed that this method doesn't work because craigslist doesn't have an Allow-Cross-Domain header set. Fair point. Is there an alternative way to download a page cross-domain using Javascript in Firefox? It's worth ...
I have created a basic role-based security directive in angularjs. It's my first attempt at making a directive. My goal is to replace the following HTML: <authorize if-granted="GET_POSTS"> Hello WORLD!!!! {{name}} </authorize> with j ...
My current project involves using Nodejs to create a deep copy of an object generated by Squel, a query building library. The main dilemma lies in how to replicate the exact filteredQuery variable. The object is initialized with: filteredQuery = squel.sel ...
Our company deals with URLs in this format: http://helloworld.com/product?filter[category][0]=persian We aim to transform the URL into a cleaner version: http://helloworld.com/product-persian When additional filters are added to the current UR ...
I'm currently working on coding in JavaScript to extract an array of elements after splitting using a regular expression. var data = "ABCXYZ88"; var regexp = "([A-Z]{3})([A-Z]{3}d{2})"; console.log(data.split(regexp)); The current output is [ &a ...
I'm facing an issue where my app crashes when attempting to display a mui icon based on a certain condition. I suspect the problem lies in how I am using PriceCheckIcon within {}. Can someone provide assistance? <span style={ ...
While I was exploring nextjs.org and following the tutorial, I encountered an issue where the function inside onLoad wasn't executing. It's puzzling because there was no call made to that link in the networks tab of my browser's developer to ...
As a newcomer to Node Js, I am struggling to understand why the code below is throwing a syntax error with catch(). I recently updated to Node JS V14. Any assistance would be greatly appreciated. async function demoPromise() { try { let message ...
A dynamic text box has been created using Jquery/JavaScript, allowing users to click on an "Add More" button to add additional input boxes for entering data. However, a challenge arises when attempting to store this user-generated data in a database. Assi ...
In the controller, there is a function that sets the true value to a variable. function setShow() { return this.isShow === 'Foo'; } The value of this.isShow is set to 'Foo' Within the template, there is <div ng-if = "vm.setShow( ...
Currently, I am working on developing an Angular application utilizing Bootstrap. To reduce the impact of Bootstrap on my HTML code, I have implemented two directives specifically for forms: form-control.js module.directive('formControl', func ...
I am attempting to verify the existence of a property in the given object: var objects = { '1': [ 'A-TheA', 'B-TheB' ], '2': [ 'A-TheA', 'B-TheB' ] } I am seeking to confirm whether &apo ...
I recently transitioned my project from React to Next.js and encountered an issue where my environment variables are showing as undefined, even though they were functioning correctly in React. Can someone provide some guidance or assistance with this probl ...
I'm currently developing a unique Node.js / Express application that visually represents text notes as a network to offer users a clear summary of the connections between different notes. The project heavily relies on frontend functionalities, requir ...
I have encountered a problem while attempting to manipulate table rows using Javascript. Adding new rows works fine, but deleting rows presents an issue. Specifically, the delete function fails if the first row or a row in the middle is deleted (the live ...