Formatting Specific Labels in HighCharts: A Guide

I'm trying to display the label values within a Highcharts bar chart by utilizing the dataLabels.Formatter function.

However, I've noticed that when the bar size is inconsistent, the labels are sometimes displayed inside the bar, which looks good. But in other cases, when the bar is very small compared to the label, the label appears outside of the bar.

To see an example of this issue, you can view my code pen here: https://codepen.io/JGSpark/pen/YzzBydv?editors=1010

On the last bar, which is very small, the label "40" is displayed outside. Since I have set color: 'white' for all labels, it still shows up in white even when it's outside of the bar.

My question is, how can I change the color of a label if it's displayed outside of the bar?

In the given example, I specifically want to change the color of the label "40" to black. Any suggestions on how to achieve this?

csshighchartslabel

Answer №1

To enhance the appearance of your chart, consider implementing a custom formatter that can dynamically change the color of the labels based on the size of the yAxis value:

formatter: function() { 
    var maxValue = this.series.yAxis.max,
    textColor = this.y / maxValue < 0.05 ? 'black' : 'white'; // determine color based on percentage
    return '<p style="color: ' + textColor + '">' + this.y + ' M</p>';
},

Answer №2

If your chart is not automatically generated, you have the option to specify the dataLabels.color for a specific data point.

{
  y: 40,
  dataLabels: {
    color: 'black'
  }
}

Check out the demo

API documentation

EDIT

Another approach would be to implement a function within the chart.events.load that identifies whether dataLabels are aligned to the left or right, and then sets the desired color - this will be useful if there are multiple labels outside the column bar.

    events: {
  load() {
    let chart = this,
      series = chart.series;

    series[0].points.forEach(p => {
      if (p.dataLabel.alignOptions.align === 'left') {
        p.dataLabel.css({
          color: 'black'
        })
      }
    })
  }
}

See the updated demo API reference

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

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

I am looking for a way to showcase a list of Accordions in a two-column layout. Each Accordion consists of both a Summary and Details section, with the Details being visible only when the Summary is clicked. Unfortunately, I won't delve into the imple ...

htmlcssreactjscss-grid

What is the best way to show an image within a div using HTML and fetching data from an API response?

I am attempting to showcase an image within a div using HTML. I utilized fetch to retrieve the JSON data from the following API: . The response contains JSON data with the image URL labeled "primaryImage". While I can display it as text, I am encounterin ...

javascripthtmlcssjson

Where would you start looking if the right side of a table border is not visible?

Where should I start looking if the right side border of a table element in a div is not visible? ...

htmlcsscss-tables

The issue with property unicode malfunctioning in bootstrap was encountered

I have tried to find an answer for this question and looked into this source but unfortunately, when I copy the code into my project, it doesn't display Unicode characters. section { padding: 60px 0; } section .section-title { color: #0d2d3e ...

javascripthtmljquerycss

Create a mechanism in the API to ensure that only positive values greater than or equal to 0 are accepted

My goal is to process the API result and filter out any values less than 0. I've attempted to implement this feature, but so far without success: private handleChart(data: Object): void { const series = []; for (const [key, value] of Object.e ...

javascriptangulartypescripthighcharts

Faulty toggle functionality within a JavaScript-created accordion panel

HTML I'm looking to add a FAQ question within the div with the class "section-center" <body> <section class="questions"> <div class="title"> <h2>FAQ SECTION</h2> < ...

javascripthtmlcss

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

Display a <div> element styled using CSS3

Question: I am facing a challenge with CSS3 styling. I have one class and one div. The class is currently set to display:none, but I want it to show when the mouse hovers over it (display:block). I have attempted the following: .1:hover + div#2 { dis ...

css

What is the best way to resize SVG graphics effectively?

I am in need of creating a seating chart. I have generated an SVG with the seats. <div class="seats-map"> <svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 1000 300"> <g data-row ...

htmlcsssvg

Creating Transparent Rounded Backgrounds in Google Chrome Packaged Apps: Achieving the same look as Google Hangout app

Looking at the screenshot below, it is evident that the Hangout app has a fully transparent design with background shadow effect applied to it. I have tried various methods in vain, such as applying CSS styling to the "html" and "body" tags of the page, a ...

javascripthtmlcssgoogle-chromegoogle-chrome-app

Animate CSS every quarter of a minute

Is it possible to create an animation that runs infinitely every 15 seconds in the sequence 1, 2, 3, 4, 3, 2, 1 with different delays for each item using CSS? The animation delay seems to only work on the first iteration. Achieving this effect is easy wi ...

htmlcssanimation

What advantages does em have over px in the Zurb Foundation's responsive grid system?

The Zurb Foundation Media Queries are specified in em units: $small-range: (0em, 40em); /* 0, 640px */ $medium-range: (40.063em, 64em); /* 641px, 1024px */ $large-range: (64.063em, 90em); /* 1025px, 1440px */ $xlarge-range: (90.063em, 120em); /* 1441px, 1 ...

cssmedia-querieszurb-foundationbreakpoints

When I try to hover my mouse over the element for the first time, the style.cursor of 'hand' is not functioning as expected

Just delving into the world of programming, I recently attempted to change the cursor style to hand during the onmouseover event. Oddly enough, upon the initial page load, the border style changed as intended but the cursor style remained unaffected. It wa ...

javascripthtmlcss

Swapping out LinkButtons using jQuery

[EXPLANATION] (apologies for the length) In my gridview, users have the option to add a new entry or edit an existing one. When they click on either 'Add' or 'Edit', a popup window appears for them to input the information for the new ...

jqueryasp.netcss

Creating a Burger Navigation Menu with CSS and HTML using Image Overlapping

I'm encountering an issue with the new website I created for my local Church. I followed a tutorial on building a burger menu using just HTML and CSS, which you can view here. The problem arises when I attempt to place an image below the navigation m ...

htmlcss

How can I ensure that a bigger sprite image fits inside a smaller div?

I have a unique situation where I am working with a large image sprite that is 1030px by 510px and contains two smaller images, each being 515px by 515px. My goal is to extract the two small images from the sprite and set them as backgrounds for two <im ...

htmlcss

Converting a table-based layout to Bootstrap using the "row" and "col-*-*" classes

My current project is built on a table-layout structure, but now the requirements have changed and we need to make it responsive. To achieve this, we have decided to use Bootstrap. How can I convert the existing tables into a Bootstrap grid layout without ...

csstwitter-bootstraphtml-table

Ensuring a button (class) is in active hover mode when the document loads

My website features 4 clickable service buttons on the homepage, each with a unique hover effect (background-color change) when users interact with them. While this setup works well overall, I am looking to highlight the FIRST button as the most important ...

javascriptjquerycss

Sliding Navigation Panel

Currently, I am attempting to implement a sidebar push navigation that mimics the one showcased here. My HTML structure includes content within a center element div. The code snippet is as follows: <div id="mySidenav" class="sidenav"> <a href="j ...

css

Solving the style upload issue with NextJS and Module Federation in ReactJS

My current project utilizes React 18 and webpack 5 with the module federation plugin. I am exploring the possibility of integrating Next JS with module federation, but I am encountering an issue where the host project is not able to fetch styles from the r ...

cssreactjsnext.jswebpack-5webpack-module-federation