Eliminate the shadow or background glow effect from the data labels in highcharts?

Can someone help me with my Highcharts issue? On my chart, the red labels have a white glow behind them in Chrome and Firefox. How can I get rid of that glow or change it to blue so it blends in better?

I've tried using various properties like shadow, backgroundColor, but I couldn't find the one defining that glow behind the text. Here is a snippet from the API documentation: http://api.highcharts.com/highcharts#plotOptions.column.dataLabels

plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                color: 'red',
                inside: false,
                xHigh: -45,
                xLow: -9999999,
                shadow: "#ff0000",
                formatter: function () {
                    if (this.point.high) {
                        var myDate = new Date(this.y);
                        var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth(),myDate.getUTCDate());
                        return '<b>' + Highcharts.dateFormat('%m/%e',newDateMs) + '</b>';
                    } else {
                        return null;
                    }
                }
            }
        }
    }

Answer №1

Disable the text shadow by setting dataLabels.styles.textShadow to false.

    plotOptions: {
        columnrange: { // or general options: "series: { ... }"
            dataLabels: {
                enabled: true,
                color: 'red',
                style: {
                    textShadow: false 
                }
            }
        }
    },

Check out the demo here: http://jsfiddle.net/oe1vcmqj/2/

UPDATE:

Starting from Highcharts version 5.0.3, use textOutline instead of textShadow.

    plotOptions: {
        columnrange: { // or general options: "series: { ... }"
            dataLabels: {
                enabled: true,
                color: 'red',
                style: {
                    textOutline: false 
                }
            }
        }
    },

Updated demo available at: http://jsfiddle.net/oe1vcmqj/49/

LATEST UPDATE:

From Highcharts version 5.0.13 onwards, ensure that the textOutline option is a string, so set it to 'none' to disable the outline.

    plotOptions: {
        columnrange: { // or general options: "series: { ... }"
            dataLabels: {
                enabled: true,
                color: 'red',
                style: {
                    textOutline: 'none' 
                }
            }
        }
    },

Latest demo can be viewed at: http://jsfiddle.net/BlackLabel/s7ejvhmu/

Answer №2

labelData: {
      activated: true,
      template: '{data.value}',
       design: {
          strokeText: false 
           }
        },

Answer №3

When styling the tspan tag, remember to include text-shadow:none !important;.

Cascading Style Sheets (CSS)

tspan{
    text-decoration:none;
    text-shadow:none !important;
}

Check out the FIDDLE DEMO here!

Answer №4

it did the trick for me...

dataLabels: {
                activated: true,
                color: 'white',
                style: {
                    // textShadow: false 
                    textOutline: false
                }

Answer №5

When working with version 1.4.0

make sure to utilize the following:

dataLabels: {
  dropShadow: false
}

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

Launching a Node.js script with pm2 and implementing a delay

Utilizing the amazing pm2 package to maintain the longevity of my node.js applications has been extremely helpful. However, I have encountered a problem that I am unsure how to resolve. One of my applications involves multiple scripts, a server, and sever ...

The process of creating a mind map with blank spaces included

I am working on creating a mapping system that links companies with their logos. The goal is to display these logos on a google-map. While completing the company-logo association map, I noticed that some vessel names contain white spaces, causing a compil ...

What is the proper way to initialize a two-dimensional array in JavaScript?

I recently received a suggestion on this question to create a two-dimensional array in my jQuery quiz application. However, I seem to be encountering an error while running the code. I suspect the issue might be due to incorrect formatting or a lack of ini ...

The issue arises when using an Angular directive with an input type set as "number"

When the input type is text, the code below works perfectly fine. However, it fails to function when the input type is changed to number. <div ng-app="myApp" ng-controller="myCtrl as model"> <input type="text" ng-model="cero" ng-decimal > ...

How to effectively transfer a JSON object from a Python function to JavaScript using Eel, allowing you to seamlessly utilize and modify the JSON data

Let's delve into a slightly confusing question together. Have you heard of Eel? It's a Python module that lets you use functions created in Python in Javascript, and vice versa. What I want to achieve is taking a JSON object generated by a Python ...

Alerting Users Before Navigating Away from an Angular Page

I am looking to implement a feature in my app that will display a warning message when attempting to close the tab, exit the page, or reload it. However, I am facing an issue where the warning message is displayed but the page still exits before I can resp ...

Issue with Ajax reappearing the second time

Currently, I am experiencing an issue with the sorting function on search results. After performing a search, if I try to change the value in the dropdown for filtering the number of results per page, it works fine for the first time. However, upon further ...

When my viewport's size is less than 998px, a blank space appears

While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without an ...

Unable to retrieve the status for the specified ID through the use of AJAX

When I click the button in my app, I want to see the order status. However, currently all statuses are being displayed in the first order row. PHP: <?php $query = mysqli_query($conn, "SELECT o.orderid,o.product,o.ddate,o.pdate,k.kalibariname,o.sta ...

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

I'm looking for assistance with a script for my website that dynamically generates a PDF after the user makes selections in one of the frames. The website uses the HTML5 tag to display the PDF file. Can anyone provide guidance on a script that can: ...

Is it possible to implement the onscroll function from jQuery in Vue.js?

I am looking to implement a sticky navbar feature using JQuery on scroll function in vue.js. Can anyone guide me on how to achieve this seamlessly? Currently, I have my Components set up as a bootstrap navbar that I want to stick onscroll. If there are al ...

Unusual grey rectangle (similar to a selection tool) found in the top left corner of a contenteditable div on

I recently utilized Vue to create a contenteditable div on my website. However, I encountered an issue where a gray area appeared on the upper left corner when hovering over the div. Oddly enough, this problem only occurred in Chrome, while Safari and Fire ...

What is the proper way to select this checkbox using Capybara in Ruby?

Is there a way to successfully check this checkbox?view image description I attempted the following: within('div[id="modalPersistEtapa"]') do element = @driver.find_element(:xpath, '//*[@id="2018_4"]/ ...

Having trouble with Google font displaying on React site but not on mobile devices?

After importing a Google font that appears perfectly on desktop and cross-browser, an issue arises on mobile where default fonts are shown instead. Below is a snippet from my App.css file: @import url("https://fonts.googleapis.com/css2?family=Turret+Ro ...

Sending additional parameter to a return function callback

In my current project, I'm utilizing a library function that follows this structure: let arr = [1,2,3] arr.forEach((item, i) =>{ doSomething(inputParam, (err, result)=>{ ... //Use err and result }); }) The err and resu ...

Tips for Disabling Alert Pop-ups when Launching Desktop Applications from a Browser

Is there a way to prevent the alert pop-up when launching a desktop application from a web browser? For instance, when typing calculator:// in the browser, we want to eliminate the alert box using an Angular TypeScript file. see image reference ...

Gather a linear array of deeply nested information

Below is a dictionary: var objectSchemasList = { 1: [ { name: 'list_field1_1', uuid: 'uuid1', fieldObjectSchemaId: 2 }, { name: 'list_field1_2', uuid: 'uuid2', f ...

What is the best way to trigger the scrollTo function after the list (ul) with images has finished reflowing?

In my React application, I used the Material-UI List component to display images with varying dimensions and limited to a max-width of 25%. Upon loading the page, I call scrollTo({top: some-list-top-value}) on the list to position it at a specific point. ...

The jQuery dropdown selection for only displaying the month and year is not functioning properly when using the select

Currently, I am utilizing a datepicker with only the month and year as options to select from using dropdowns. However, when I apply the following CSS to disable the days of the datepicker, it ends up affecting all datepickers in my JSP file. 1. Is there ...

Ways to prevent a high-powered Javascript loop from causing the browser to freeze

I am currently utilizing Javascript to parse an XML document containing roughly 3,500 elements. I have implemented a jQuery "each" function for this purpose, although I remain open to considering alternative looping methods. One issue that has surfaced ...