What is the best way to revert the Highcharts bar color back to its default color?

I am currently working with Highcharts version 4.1.10

In my bar chart, I have implemented a feature where the color of the bar changes when its value exceeds a certain threshold.

//This function is called at regular intervals by a timeout
function myTimeoutFunction() {
    var xmlRequest = $.ajax({
        dataType: "json",
        url: applicationPath + 'myWebapi/valuesToMeasure',
        cache: false,
        success: myFunctionOnSuccess,
        error: myFunctionOnError
    });
}

function myFunctionOnSuccess(myData) {
    if (myData.value > 500000000) {
        mySeriesDataArray.data.push({ y: myData.value, color: "rgb(255, 0, 0)" });
    } 
    else  {
        mySeriesDataArray.data.push({ y: myData.value);
    }

    //...

    mySeries.setData(mySeriesDataArray.data,true);
}

The series data undergoes updates periodically through a timeout mechanism.

When a value surpasses the threshold, the bar color changes as intended to red.

However, upon the value dropping back below the threshold, the bar remains red. It seems like the color style persists even after the condition is no longer met.

Is there a way in Highcharts to reset the color of the bar to the original one chosen automatically by the library for the series?

Answer №1

Make sure to reset the color counter prior to making any updates.

chart.colorCounter = 0;

For a demonstration, check out this example:

JSFiddle Demo

Answer №2

Have you attempted the solution provided below?

mySeriesDataArray.data.push({ y: myData.value, color: null });

To clarify, simply eliminate the color property.

If this does not resolve the issue, you have the option to utilize:

mySeriesDataArray.data.push({ y: myData.value, color: mySeries.color }); // re-apply color

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

Adjust the size of a panel in Extjs when its parent div is resized

Within my div, I have included an Extjs panel using the renderTo configuration option. Can someone please advise on how to adjust the panel size dynamically when the div is resized? Appreciate any help! Thank you. ...

JavaScript payload object's name

Here is the data I have received. {name: "Sinto 6", val: {…}, line: "Sinto 6"} line: "Sinto 6" name: "Sinto 6" val: AvgMachTime: 253 AvgManTime: 1343 CollectMachTimer: 359 CollectManTimer: 108 CycleTimeMach: 359 Cy ...

Efficiently linking styles through computation in Angular

So I've been working with Angular5 and I figured out how to bind an HTML element's style to a Boolean value. However, I'm struggling to find a way to do this for multiple styles simultaneously. For example, I have this code snippet that wor ...

Tips on adjusting the pixel dimensions of an image using a file object

Within a form on our website, users have the ability to upload an image file. To ensure quality control, I've set up validation to confirm that the uploaded file is either an image or gif format. In addition to this, I'm looking for a solution th ...

Step-by-step guide to creating a border around text with a number included in between the lines

Is there a way to replicate the appearance of the image shown below using CSS, Bootstrap, or other client-side methods? ...

When the Popover appears in ShadCN, the input field unexpectedly takes focus

This unique component incorporates both Popover and Input functionality from shadcn. An issue I have encountered is that when I click on the Input to trigger the Popover, the Input loses focus and the cursor moves away from it. Expected outcome: Upon c ...

What is the process for incorporating beforeAnimate and afterAnimate callbacks into a custom jQuery plugin?

Let's imagine I have developed a plugin: // creating the plugin (function($){ $.fn.myPlugIn = function(options){ defaults = { beforeAnimate : function(){}, afterAnimate : function(){} ...

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

Vue's reactivity in Vue 3 is exhibiting strange behavior with boolean data

Currently, I am attempting to modify a boolean variable. Upon the initial page load, everything works as expected. However, upon reloading the page, the variable gets updated locally within the method but not in the global data section. As a result, an err ...

The refreshed Google Chrome cache post-update on the Developer Dashboard

With each new Google Chrome update, developers experience a mix of benefits and drawbacks. Lately, I have noticed a change in how Chrome handles caching, with everything being cached successively without any disassembly. For instance: When working on a we ...

Tips for securely implementing JSON web tokens when integrating an external application with the WordPress REST API

I have a query regarding JWT. Let's consider this situation. A -> wordpress site with wp rest api enabled; B -> External application (for example, a simple javascript/jQuery app) Suppose I want to make a post request or create a new post on t ...

Having issues with ASP.NET MVC AJAX PartialView not loading Telerik UI components

I am facing an issue with a PartialView that I update using AJAX. The HTML elements load correctly when updating the Div with AJAX, but the Telerik chart is not loading. The datasource in the chart does not call the Action method: .DataSource(ds => ds. ...

Encountering the error "undefined object" while using the yield keyword in JavaScript

var pi = document.getElementById("pi"); function * calculatePi(){ let q = 1; let r = 0; let t = 1; let k = 1; let n = 3; let l = 3; while (true){ if (4*q+r-t < n*t){ alert(n); yield n; ...

Keep a vigilant eye on the peak utilization of memory within the Node.js process

I am in search of a way to effectively monitor the maximum memory usage in a Node.js process, regardless of whether there are memory leaks or not. The processes in question include both real applications and synthetic tests. My expectation is that it sho ...

Incorporate personalized buttons into your Slick Carousel

Looking to add custom previous and next buttons to a slick carousel? I attempted using a background image on the .slick-prev and .slick-next CSS classes, as well as creating a new class following the documentation, but unfortunately, the arrows disappeared ...

Calling an ajax request to view a JSON pyramid structure

My experience with ajax is limited, so I would appreciate detailed answers. I have a Pyramid application where I need to load information via ajax instead of pre-loading it due to feasibility issues. I want to retrieve the necessary information through a ...

What's the issue with ng-click not functioning properly?

My goal is to create a directive called "myDisabled" in AngularJS version 1.1.5 since the ng-disabled functionality is not available in this version. Here is the code for the directive: tableApp.directive('myDisabled', function($compile) { retur ...

Acquire a portion of a string with JavaScript or jQuery

Given the string testserver\sho007, how can I utilize jQuery to extract only the value sho007? ...

What could be the reason why the Google Maps API fails to load on Firefox?

I am currently utilizing the v3 version of Google Maps API. While my map functions perfectly in Safari and Chrome, I encountered an issue in Firefox where I received the error message "google.maps.Map is not a constructor." When inspecting 'google.ma ...

Tips for implementing PHP Instagram Signature using AJAX

I'm facing a challenge with the latest Instagram API, which now requires an Enforced Signed request that includes both an Access Token and Client Secret to generate a Signature. If anyone could spare some time to help me out, I would greatly apprecia ...