Changing the color of a Highcharts series bar according to its value

Question

Changing the color of a Highcharts series bar according to its value

Playing around with Highcharts in this plunker has led me to wonder if it's possible to dynamically set the color of a bar based on its value. In my current setup, I have 5 bars that change values between 0 and 100 at intervals. I'd like the colors of these bars to indicate the range of numbers they represent, such as:

0 < x < 25 displaying a neutral color

25 < x < 50 showing up as yellow

50 < x < 75 appearing in orange

75 < x < 100 being colored red

While I've used series methods in the past with other APIs, changing bar colors doesn't seem straightforward with Highcharts. Although I've previously achieved this using Chart.js, I want to explore Highcharts further due to its popularity.

javascript css angularjs highcharts

Answer 1

Answer №1

After trying out the plunker link you provided, I added this code snippet at the bottom of the interval section, and it successfully changed the line color.

$scope.chart.series[0].update( {color: "red"} );

It might be more efficient to create a function that runs at the beginning of each interval. This function can generate random numbers and assign colors based on those numbers. You could store these values in an array of objects for easier management.

I'll leave the implementation of this function as a challenge for you to tackle.

Answer 2

After trying out the plunker link you provided, I added this code snippet at the bottom of the interval section, and it successfully changed the line color.

$scope.chart.series[0].update( {color: "red"} );

It might be more efficient to create a function that runs at the beginning of each interval. This function can generate random numbers and assign colors based on those numbers. You could store these values in an array of objects for easier management.

I'll leave the implementation of this function as a challenge for you to tackle.

Answer 3

Answer №2

When fetching data from an AJAX call and working with a series array, you have the option to include a "color" property that will define the color of the bar.

In the provided example on Plunker, I made a modification right after $scope.jsondata = ret;:

$scope.jsondata[0].color = "red";

This resulted in the bar turning red. You can achieve this either on the server side and pass it to your JavaScript, or alternatively, perform a validation before setting the series in HighCharts to dynamically assign the color property based on certain conditions.

Answer 4

When fetching data from an AJAX call and working with a series array, you have the option to include a "color" property that will define the color of the bar.

In the provided example on Plunker, I made a modification right after $scope.jsondata = ret;:

$scope.jsondata[0].color = "red";

This resulted in the bar turning red. You can achieve this either on the server side and pass it to your JavaScript, or alternatively, perform a validation before setting the series in HighCharts to dynamically assign the color property based on certain conditions.

Changing the color of a Highcharts series bar according to its value

Answer №1

Answer №2

Similar questions

Sending an array from the front-end to the back-end in Laravel with JavaScript

The art of uploading images with HTML and CSS

Divs that are 30% of their parent's width will not align vertically and will not fit in a parent div that is 100% width

Elevating the Sidebar: Transforming Bootstrap 4 Sidebar into a Top

The PHP query that was sent through an AJAX POST request is not being executed correctly

Sinon threw an assertion error out of the blue

Restricting the input field in jQuery to only accept the maximum value based on the

When employing `queryParams` in Angular routing, the URL will automatically replace `%` with `%25`

Karma: Uncaught ReferenceError - You must define the app before using it

Can I use my local network/browser to download an html file from a webpage as if I manually downloaded it using javascript or nodejs?

Model of Objects within a Document

Pass the modified array of object properties to the front end after making necessary changes

Arranging content within a bounding box

Children transform when the parent element is being hovered

Angular 1.5 component's validation for '&' binding returns as null

Odd gap beside Bootstrap5 navbar that needs fixing

Placing toast notifications on top of dialog modals

Encountering a series of errors in Discord.js v14 while executing a specific

Connecting registered users to a database in a Firebase web application

Issue with modal input causing directive template to not render