Modify the text of a label for an individual series in Highcharts

I have customized my stacked bar highchart so that the last series is colored grey. However, I am wondering if there is a way to change the text color to black for this specific series where the background color is grey.

plotOptions: {
    series: {
        stacking: 'percent',
    },
    bar: {
        stacking: 'percent',
        dataLabels: {
            enabled: true,
            format: '{y}%',
            style: {
                color: '#ffffff' //I currently have it set to white here
            }
        }
    }
}

http://jsfiddle.net/jimbob25/V446C/

javascriptjquerycsshighcharts

Answer №1

If you want to customize the color for each series individually, take a look at this example: http://jsfiddle.net/V446C/5/

series: [{
    name: 'Below Average',
    color: '#E9E9E9',
    data: [12, 23, 13, 18, 7, 19, 9],
    dataLabels: {
        style: {
            color: '#000000'
        }
    }
}, {
    name: 'Average',
    color: '#629AC0',
    data: [42, 45, 35, 57, 29, 61, 26]
}, {
    name: 'Above Average',
    color: '#006FBC',
    data: [46, 32, 52, 25, 64, 20, 65]
}]

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 css style based on the current time of day

I recently came across this fascinating tutorial that demonstrates an animation changing from day to night every 30 minutes. The concept is very appealing, but I began contemplating how to adapt this animation to reflect real-time changes between day and ...

javascriptjqueryhtmlcss

Using Ajax to access the API variable through its URL attribute

My main goal is to configure a User ID and API Key within the URL for an Ajax call: Currently, I am doing: $.ajax({ url: "https://www.googleapis.com/plus/v1/people/115332174513505898112?key=AIzaFrCzbKLawSPG8C0tjZDozO1bSWx49mJm13s", context: document. ...

javascriptjqueryajax

What could be the reason for my clickable div not functioning as a link in this particular code?

Here is my jQuery script: $('.projektet').click(function(){ var url = $(this).find("a").attr("href"); window.location = url; }); <div class='projektet'> <h3>".$alias." ".$expertis." ".$other."</h3> & ...

jqueryhtml

How can I properly set up the view in Backbonejs?

Whenever I try to initialize my view, I encounter an error message Uncaught TypeError: Cannot read property 'toJSON' of undefined Here is the code snippet causing the issue: //Model var Song = Backbone.Model.extend({ defaults: { ...

javascriptbackbone.js

Having trouble with autocompleting using jquery json and getting an Internal Server Error 500?

Why does the autocomplete program with jQuery JSON and C# work on local but not on the server? [WebMethod] public List<string> GetAutoCompleteData(string prefixText) { ... Here is the error: Internal server error 500 In addition to that, an ...

c#javajqueryajax

Is there a way to rotate a symbol around its center without the need to specify its position on two separate occasions

I am working on placing tile symbols on a grid and aiming to achieve the following: Utilize tile coordinates for symbol placement (e.g. 4,2 instead of 85,43) Define the vertices of symbols using pixel coordinates (not tile coordinates) Rotate symbols arou ...

csssvgcss-transforms

Explore an array of elements to find the correct objectId stored in mongodb

element, I am faced with a challenge of searching through an array of objects to find a key that contains nested object id for populating purposes. Exploring My Object { service: 'user', isModerator: true, isAdmin: true, carts: [ ...

javascriptmongodbexpressmongoose

Text displayed in a pop-up when hovering

I'm in search of suggestions for creating a text pop-up that displays when the mouse hovers over specific text. After researching numerous websites, I haven't found exactly what I need. Currently, I have a table with headers at the top and I woul ...

c#javascriptjqueryhtmljquery-hover

What is the relationship between dependencies in the `useEffect` hook and state within React?

I have a good understanding of how React's "useState" hook operates. State in React is essentially a list of values associated with specific components, and each "useState" call has an index that references a specific state value. When the React rende ...

javascriptreactjs

Exploring the JSON object tree through recursion using underscore and backbone

If I have a JSON object with nested arrays of unknown depths and I want to pass each array into a _.template function, how can I make that happen? Here's an example of what my JSON object might look like: $start_elements = array ( array( ...

javascriptjquerybackbone.jsunderscore.js

Display the second ID when the click function is triggered

Hi there, I am facing an issue with a double click function. When the second element is clicked, the console displays a duplicate id error. However, if I move the console log to the first click, it only shows one log. How can I resolve this problem? My goa ...

jquery

Remove HTML tags from a table cell containing a combination of radio buttons and labels

Javascript Function: My JavaScript function posted below is designed to iterate through the column indexes specified in the 2nd parameter and also iterate through the element ids provided in the 3rd parameter. It will then populate the textbox, radiobutto ...

javascriptc#jqueryhtmlasp.net

Non-functioning function within object

this is a unique object var Manager = (function () { var self = this; self.fetch = function (request, response) { response.send({ message: 'Data fetched successfully' }); } return self; })() module.ex ...

javascriptnode.js

Is there a way for me to identify the vertical gaps in my code using JavaScript?

Within this specific HTML document, there are multiple div elements that have an absolute positioning applied to them I am looking to develop a JavaScript code that can determine the row of each individual div. I define a row as any space on the vertical ...

javascripthtml

Managing errors with ajax requests

I am currently working on implementing client-side error handling. Below is the code snippet I am using: function($, _, Backbone, mainAccountCollection,accounttmpl){ var mainAccountDetails = Backbone.View.extend({ initialize: function(){ ...

jqueryajaxbackbone.js

Identify Safari browser and redirect visitors

Here is the script I am using to detect and redirect a page specifically when Safari is used: if(/safari/.test(navigator.userAgent.toLowerCase())) { window.location.href = "elsewhere.html" } Currently, it redirects in both Safari and Chrome. How can ...

javascripthtmlhttp-redirect

How can one generate an array containing all attributes found in the HTML of a website?

I have a project idea where I want to be able to input a hyperlink address and then get a list of attribute contents as the output. For instance, if I input a Netflix genre hyperlink for Adventure Movies, I'd like to receive a list with all the movie ...

javascripthtmljqueryjsonattributes

Using Ajax to invoke a C# webmethod

I'm trying to call a webmethod defined in this specific class <%@ WebService Language="C#" Class="emt7anReyady.myService" %> using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Linq; usi ...

c#javascriptjqueryasp.netajax

Creating a unique directive specifically designed to be used within an ng

I have a unique custom directive that I implemented in AngularJS. The directive is called within an ng-repeat loop, as shown below: The array of objects, selectedMealCalc.calculated_foods, is aliased as 'items' <!-- CUSTOM DIRECTIVE --&g ...

javascriptangularjsangularjs-directive

What steps should I take to eliminate the white gap between the paragraph and the footer on my webpage?

If you're new to html and css, feel free to check out the url [file:///Users/CatherineDu/百度云同步盘/practice/about.html]. I'm currently working on building a simple website and facing an issue - there are unwanted white spaces between the ...

htmlcss