The data labels in the main chart of a Highcharts column with drilldown appear blurry, with the exception of the columns that have been drilled

When setting up a Column Chart with Drilldown:

The main chart displayed data labels in a blurred black color. However, when clicked, the next columns that appear (the drilled down columns) are clear and easy to read (white color, no blur). I discovered a workaround by declaring:

.highcharts-drilldown-data-label TEXT { color: #FFFFFF !important; text-shadow: 0 0 0px white !important; fill: white !important }

Feel free to remove the selector above and see the result here: https://jsfiddle.net/marcelbonnet/pjb5dw9q/1/

Do you think this is a bug in highcharts or could it be an error on my part? I even tried changing the jQuery version with no effect.

javascriptjquerycsshighcharts

Answer №1

(I wish I could provide feedback, but my points are lacking.)

It appears to me like a glitch. If you don't add the drilldown.js, your fiddle behaves as anticipated. I suggest focusing on the CSS for now.

Keep in mind that the fiddle won't work in Firefox unless the TEXT is in lowercase:

.highcharts-drilldown-data-label text {...}

You may consider reporting this issue at https://github.com/highcharts/highcharts/issues

Answer №2

Resolved with the assistance of highcharts support on github: https://github.com/highcharts/highcharts/issues/5145#issuecomment-200878598

Refer to this example: https://jsfiddle.net/pjb5dw9q/6/

The issue was related to the default style, which is underlined and blue to encourage interaction. Check api.highcharts.com/highcharts#drilldown.activeDataLabelStyle for more information.

Applying the following code resolved the problem for me.

drilldown: {
                activeDataLabelStyle: {
                                color: 'blue' //style to invite interaction
            },

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

Tailoring information to fit selected preferences

Currently working on developing a fitness app with Vue, aiming to create personalized workout routines based on user preferences. Users can choose specific options and generate a workout plan by clicking a button. The collected data is stored as an object ...

javascriptvue.js

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far: setInterval(function () { document.getElementById('test').classList.toggle('flipped& ...

javascripthtmlcss

The "maxlength" attribute does not function with the input type "number" in an HTML textbox

The maxlength attribute does not seem to be functioning properly when using type="number" ...

javascripthtml

Tips for retrieving the Ajax header details using JavaScript

For my http GET request, I am using the following code: $.ajax({ type: 'GET', url: server + '/hello', dataType: 'json', async: false, xhrFields: { withCredentials: true }, success: functio ...

jqueryajaxgetxmlhttprequestchromium-portable

The current context for type 'this' cannot be assigned to the method's 'this' of type '...'

Currently, I am in the process of defining type definitions (.d.ts) for a JavaScript library. In this specific library, one of the methods accepts an object of functions as input, internally utilizes Function.prototype.bind on each function, and then expos ...

javascripttypescripttypescript-typings

sending information from a PHP form to a JavaScript window

Currently, I am in the process of developing a game using javascript and jquery. In this game, when a player interacts with another character, it triggers the opening of text from an external file using the window.open('') function. At the start ...

javascriptphpjqueryformswindow.open

Vue's v-bind:style does not support background image-set() functionality

Currently, I am utilizing Vue's v-bind:style feature to set the background of a div, which is functioning properly. However, I am facing an issue when attempting to use background in combination with image-set(). When using a regular background-image, ...

javascriptvue.jsbackgroundimageset

What is the method for submitting a POST request with a JSON body that consists of only a string, without any key-value pairs included?

There was a developer who, not knowing the correct JSON format for key-value pairs, created a JSON body that looks like this: { "dog" } Instead of { "dog": "dog" } I must send the request from a JavaScript file, and the body needs to be in JSON f ...

javascriptjsonstringpostkey-value

Angular CORS problem when sending information to Google Forms

When submitting the data: Error Message: Unfortunately, an error occurred while trying to send the data. The XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. The response to the preflight request did not pass the ac ...

javascriptangularjsajaxcors

What is causing the regular expression to fail when using the OR operator?

Here is the code snippet I've been working on: function toCamelCase(str){ var rest = str.replace((/-/)|(/_/)g, "") ; document.write(rest); } toCamelCase("the-stealth_warrior"); When running this code, I receive an error message: Uncaught Syntax ...

javascriptregex

Pass user input values to PHP via AJAX and display the outcome on a designated div

I am currently working on a project where I need to send an input value to a PHP script and display the returned value in a div using AJAX. However, I seem to be struggling with getting it to work properly. Any assistance or suggestions would be greatly ap ...

phpjavascriptjqueryajax

Ways to refresh the main frame

Here is an example of parent code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Parent</title> </head> <body> <iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width ...

javascriptjqueryhtmliframe

Using a function parameter to restore the values of an array

Looking to clear an array using a function parameter. Below is my implementation: <script> fruitArray = ["apple", "banana", "orange", "pineapple"] function clearFruitArray(myArr){ myArr = []; ...

javascriptarraysfunction

What is the best way to install Bootstrap through npm?

My npm project is utilizing jquery with the following code: var $ = require('jquery'); In addition, my index html file includes a reference to bootstrap: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="styl ...

jquerytwitter-bootstrapnpm

Generate a smooth, flicker-free card flip animation in CSS3 across all browsers while addressing any z-index or perspective issues

Currently, I am attempting to implement a simple cross-browser 3D CSS3 card flip effect on my testing website. The outcome functions perfectly in Firefox; however, in WebKit, one part of the image vanishes during the rotation and also experiences noticeab ...

csscross-browsercss-transitions

Rearranging components in React does not automatically prompt a re-render of the page

I'm currently working on a project to display the update status of my Heroku apps. The issue I encountered was that the parent component (Herokus) was determining the order, but I wanted them sorted based on their update dates starting from the most r ...

javascriptreactjsherokuecmascript-6

Aligning text to the left center

I am looking to center left-aligned text in the yellow box (txtbox). The current look is like this: and I want it to appear like this: HTML: <div class="content container small"> <div class="txtbox"> ...

htmlcss

Tips for appending a custom list item to the bottom of the jQuery autocomplete results

I am using jquery autocomplete and have initialized the following variables $("#some_id").autocomplete("search.php?in=somewhere", { width: 270, selectFirst: false }); $('#some_id').setOptions({max: 5}); The current setup returns ...

jqueryautocomplete

Unusual occurrences within stacked MUI Popper components

Below is a sample Node component that uses a button element to anchor an MUI Popper: type Props = { children?: React.ReactNode; }; const Node = ({ children }: Props) => { const [anchor, setAnchor] = React.useState(null); return ( <div> ...

javascriptreactjsmaterial-ui

Ajax request is utilized to validate rules in jQuery

I have already asked this question, but the previous solutions did not work for me. I am trying to implement jQuery rules validation and display a message "Zone Name Already Exist...!" using Ajax. I have tried using submitHandler but it is not functioning ...

jqueryajaxvalidationrules