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

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

What could be causing this test to fail when testing my API endpoint?

Triggering an event upon completion of ng-repeat's execution

Unable to vertically scroll on a position fixed element

Upon loading, the IntersectionObserver immediately declares the isIntersecting property true for all elements

Ensure the button remains in focus after clicking on the input field: Material-Ui

Adding HTML elements dynamically using jQuery: A how-to guide

Disabling the @import cache feature in LessCSS Assetic

Bootstrap 4's Img-fluid class fails to properly resize images

Incorporate a class into the fixed navigation menu using fullpage.js

CSS transformation incomplete

The process of implementing server-side rendering for React Next applications with Material-ui using CSS

Discover the method to adjust the position of elements, such as images, using radio buttons

Ensure the links open in a new tab when using Firefox

Issue with printing JavaScript value using Selenium_ASSUME_WE_NOT have any changes in the content

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

Vertical Image Alignment in Bootstrap 3

Retrieve a div element using Ajax from the result of an If statement

Navigating through JSON data to retrieve specific values and executing repetitive actions

Error message "Exceeded the maximum call stack size" encountered during Vue-router authentication