Modify the colors of names within an array of point names and their corresponding y values using Highcharts

I am trying to customize the color for each point in an array based on its name and y value.

This is what I have so far:

(function(H) {
  H.wrap(H.Series.prototype, 'getColor', function(proceed) {
    this.color = generateColorForString(this.name);
  });
}(Highcharts));

Currently, this method works with the following data structure:

{
  "data": [
    [
      [
        "2018",
        "02",
        "16",
        "00",
        "00"
      ],
      4.9
    ],
    ...
 ],
  "name": "MySeriesName"
}

However, it does not work with a different data structure used for a pie chart:

{
  "type": "pie",
  "name": "MySeriesName",
  "data": [
    [
      "foo",
      27
    ],
    [
      "foox",
      112
    ],
    [
      "fooy",
      4
    ]
    ...
  ]
}

Is there a way to set specific colors for each point based on its name?

Here is the link to my fiddle: http://jsfiddle.net/2nd8561k/2/

javascripthighchartscolorsprototypeseries

Answer №1

To customize the color for each point in a Highcharts chart, you can use the resolveColor method from Highcharts.Point.prototype:

(function(H) {
    H.wrap(H.Point.prototype, 'resolveColor', function(proceed) {
        this.color = generateColorForString(this.name);
    });
}(Highcharts));

Check out the live demo here: http://jsfiddle.net/BlackLabel/y4ro69dq/

For more information on extending Highcharts functionality, refer to the documentation here: https://www.highcharts.com/docs/extending-highcharts

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

Entering numerous numerical values across a variety of input fields

My website currently has a form with 6 input fields where visitors need to enter a 6 digit code. To make it easier for them, I want to allow users to simply paste the code we provide into the first input field and have the remaining digits automatically po ...

javascriptjqueryhtmlformswebforms

Is there a way to have text appear in a popup when I reach it while scrolling?

Is there a way to make the textblocks on my website increase in size or pop up when I scroll down to them? I've attempted to search for a solution online but have been unsuccessful in finding one. ...

javascripthtmlcssfrontendweb-deployment

Guide on creating a similar encryption function in Node JS that is equivalent to the one written in Java

In Java, there is a function used for encryption. public static String encryptionFunction(String fieldValue, String pemFileLocation) { try { // Read key from file String strKeyPEM = ""; BufferedReader br = new Buffer ...

javascriptjavanode.jstypescriptrsa

Combining actions in a chain within an NgRx effect for Angular

After successfully working on an effect, I now face the challenge of chaining it with a service called in a subsequent action after updating the state in the initial action through a reducer. Here is the effect code: @Effect() uploadSpecChange$: Observab ...

javascriptangulartypescriptreduxngrx

Eliminate the unnecessary code repetition in my functions using Typescript

I have 2 specific functions that manipulate arrays within an object. Instead of repeating the same code for each array, I am looking for a way to create reusable functions. Currently, my functions look like this: setLists(): void { if (this.product.ord ...

javascripttypescript

Achieve the highest character count possible within HTML elements

Is it possible for a standard HTML element with defined width and height to manage characters using JavaScript, as shown in the code snippet below? <div id="text-habdler-with-width-and-height" ></div> <script> $("element& ...

javascripthtmlcss

How to utilize AngularJS to submit a Symfony2 form

I'm currently working on developing an application with Symfony2 for the backend and considering using AngularJS for the frontend. My plan is to integrate Symfony forms into the project as well. I have successfully set up the form with all the necessa ...

javascriptphpformsangularjssymfony

Matching numbers that begin with zero or are completely optional using Regex

Attempting to come up with a regex pattern that will allow the entry of the specified input into an HTML input field: The input must begin with 0 The input can be left empty and characters may be deleted by the user ^[^1-9]{0,1}[0-9\\s-\& ...

javascriptregex

Having trouble with updating a Firebase database object using snap.val()

I'm trying to figure out how to update a property within the snap.val() in order to make changes to my Firebase database. function updateListItem(listItem) { var dbRef = firebase.database() .ref() .child('userdb') .child($sco ...

javascripttypescriptfirebasefirebase-realtime-database

The ReactCSSTransitionGroup does not insert any additional classes

I have been attempting to incorporate animation into each list item within a list of articles that I am loading through an ajax request. Despite my efforts, the ReactCSSTransitionGroup element does not seem to be functioning as expected on the targeted ite ...

javascriptreactjs

Implementing a Fixed Position for a Single Record in Extjs 4.2 Sortable Grid

Is there a way to allow users to sort by any column in a simple grid with sorting enabled, while ensuring that a specific record is always displayed at the last position (based on its ID)? I am working with ExtJS 4.2.2. ...

javascriptextjsextjs4

Is there a way to determine the distance in miles and feet between various sets of latitude and longitude coordinates?

I am working with an array of latitude and longitude coordinates and I am looking to use JavaScript or Typescript to calculate the distance in miles and feet between these points. const latsLngs = [ { lat: 40.78340415946297, lng: -73.971427388 ...

javascriptangulartypescript

Issue with sync-request when using post data doesn't seem to be functioning

I am currently working on a Node.js application where I need to make synchronous requests. After some research, I came across the sync-request npm package for making these requests. However, when I tried using the code below, I encountered an error with th ...

javascriptphpnode.jspost

What steps should I take to correct the color selection of a button that has been pressed down

Here is the code snippet that I am currently working with: HTTP: <label class="instructions" for="hidden_x"> Insert X: </label> <button type="button" class="button" name="button_x" value="1" id="x_1" onclick="document.getElementById(' ...

javascripthtmlcss

Using Javascript regex to remove spaces inside parentheses

Can you provide the specific Javascript regex code for removing spaces only within parentheses? Take for instance: balance( 11010000 ) / balance( 11050000 ) The desired output should be: balance(11010000) / balance(11050000) ...

javascriptregex

The React Js error message shows an 'Uncaught (in promise)' TypeError that prevents reading an undefined property

Struggling with passing the response from an Ajax request to another function in React. Although I am able to receive the response, I cannot pass it to { this.showBattersData(data); } where I need to render the DOM. It's clear that something is missin ...

javascriptreactjstypeerror

Troubleshooting JavaScript Functions Failure Following AJAX XML Request

My current project involves developing an interactive map where users can select a year from the timeline and apply filters. This functionality is achieved through XML HttpRequest, which refreshes the SVG each time a selection is made. The SVG code for th ...

javascriptajaxsvgtooltipzooming

Ways to receive JavaScript console error messages to aid in debugging your code

Currently, I am developing a Web Application and facing an issue with capturing console errors. Specifically, I need to capture errors related to network connectivity issues, such as when the network is down or slow causing responses from the server to be ...

javascriptangularjsconsolewindow

Problem encountered when attempting to post to a node/express endpoint

It has been a while since I last used JQuery/Ajax instead of axios to connect to an endpoint, am i making any mistakes here? var express = require('express'); var app = express() var bodyParser = require('body-parser'); var path = re ...

javascriptjquerynode.jsajax

Mastering intricate data structures using React.js

I am working on creating a table for orders using React+Redux. The data I need is stored in props and it has a structured format similar to this: [{ //stored in props(redux state) "id": 37, //order 1 "content": { "items": { " ...

javascriptjsonreactjs