Implementing custom CSS styles for HighCharts API pie chart drilldown labels

I successfully created a pie chart using highcharts and configured the chart with the following options:

chart: {
          type: 'pie',
       },

In order to change the width of the text on the chart, I added the following options which force each word to be displayed on a separate line:

plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '{point.name} {point.y}',
              style: {
                width: 50,
                fontSize: '20px',
              },
             }
            }

Despite trying to change the color of the label by adding a color property to the style, it did not work. How can I change the color as well as add an underline to the text?

The following image shows the label that I am referring to on my highcharts pie chart:

https://i.stack.imgur.com/vqdfE.png

Additionally, is there a way to create a large white circle in the center of the pie chart, similar to creating a hole in a donut?

javascriptvue.jschartshighcharts

Answer №1

To set the color of the label, you can use the dataLabels.color property:

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      color: 'green', 👈
    }
  }
}

Check out demo 1

Alternatively, you can utilize dataLabels.style.color:

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      style: {
        color: 'green', 👈
      }
    }
  }
}

See demo 2

If you are working with a drilldown pie chart, you can specify the label color using 

plotOptions.series.dataLabels.color
and series.data[].dataLabels.color (allowing individual color configuration for each data point):

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      format: '{point.name}: {point.y:.1f}%',
      color: 'green', 👈
    }
  }
},

series: [
  {
    name: "Browsers",
    colorByPoint: true,
    data: [
      {
        name: "Chrome",
        y: 62.74,
        drilldown: "Chrome",
        dataLabels: {
          color: 'green', 👈
        }
      },
      {
        name: "Firefox",
        y: 10.57,
        drilldown: "Firefox",
        dataLabels: {
          color: 'green', 👈
        }
      },
      //...
    ]
  }
]

View demo 3

You can also utilize 

drilldown.activeDataLabelStyle.color
:

drilldown: {
  activeDataLabelStyle: {
    color: 'green' 👈
  },
}

Explore demo 4

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

What could be causing the JavaScript/jquery code in my Functions.php file to only function properly on the initial post that loads on my WordPress website?

Currently, I am in the process of developing a WordPress website where the content is refreshed weekly. This means that all posts, media, and files are removed from the WP environment every week and replaced with new content. One of the key components of ...

javascriptphpjqueryajaxwordpress

Encountering a Typescript error while attempting to extract state from a History object containing an enum property

My enum structure is as follows: enum values { first, second, } Within my component, I handle the history object like this: const { push, location: { state = {} } } = useHistory(); Additionally, in the same component within a useEffect hook, I have ...

javascriptreactjstypescript

Extract user's location using JavaScript and transfer it to PHP

My goal is to utilize JavaScript to retrieve the latitude and longitude, then compare it with the previous location, similar to how Facebook authenticates logins from different devices. To accomplish this, I have implemented 2 hidden fields which will capt ...

phpjavascript

Incorporate Angular directives within a tailor-made directive

I just started using a fantastic autocomplete directive called Almighty-Autocomplete. However, I feel like it's missing some features. The basic structure of the directive is as follows: .directive('autocomplete', function () { var index ...

javascripthtmlangularjsangularjs-directive

The combination of NextJS and Firebase Auth using the GoogleAuthProvider is powerful

I am encountering challenges while trying to integrate firebase authentication with Google Provider in NextJS. I have set up the necessary environment variables and successfully established a connection with firebase. However, I keep running into an error ...

javascriptfirebasefirebase-authenticationnext.jsgoogle-oauth

Is it possible to make any object reactive within Vuex?

Seeking ways to enhance the sorting of normalized objects based on a relationship. Imagine having an application that requires organizing data in a Vuex store containing multiple normalized objects, like this: state: { worms: { 3: { id: 3, na ...

javascriptvue.jsvuejs2

Utilize Vue Slot with variable names for dynamic integration

My current dilemma involves a unique component called TableContainer, featuring dynamically named slots. // ... <td class="..."> <slot :name="'statuses-' + item.id" /> </td> <td class=""> ...

vue.jsvuejs3

Error: React Select input control is throwing a TypeError related to event.target

Having trouble changing the state on change using a React Select node module package. It works with regular text input, but I can't quite get it to work with this specific component. The error message "TypeError: event.target is undefined" keeps poppi ...

javascriptreactjs

Tips for implementing a regular expression in JavaScript to parse tags from a Docker image?

I recently came across this regex for parsing docker image tag in Python. ^(?P<repository>[\w.\-_]+((?::\d+|)(?=/[a-z0-9._-]+/[a-z0-9._-]+))|)(?:/|)(?P<image>[a-z0-9.\-_]+(?:/[a-z0-9.\-_]+|))(:(?P<tag>[\w.&bs ...

javascriptpythonregex

Using PHP to extract all occurrences of window.location from an HTML document using regex

Is there a way to extract all the window.location instances in PHP? I have a list of URLs that I am fetching using cURL, saving the HTML content as a string, and now I need to identify and display all the occurrences of window.location separately. I atte ...

javascriptphpregex

Trouble with AngularJS: Updates not reflecting when adding new items to an Array

I am facing a persistent issue that I have been unable to resolve, despite researching similar problems on StackOverflow. My current project involves building an application with the MEAN stack. However, I am encountering difficulties when trying to dynam ...

javascriptangularjspromiseangularjs-ng-repeat

Discovering the Data Structures within the d3.js Illustrations by the Talented Mike Bostock

Wondering how to decipher the structure of JSONs in examples by Mike Bostock, like this one (after being transformed using d3): http://bl.ocks.org/mbostock/3886208 I aim to replicate it with my own fabricated array of JSON objects without relying on load ...

javascriptjsond3.js

Parsing Json data efficiently by utilizing nested loops

I have 2 different collections of JSON data, but I'm unsure of how to utilize JavaScript to parse the information. Data from API1 is stored in a variable named response1: [{"placeid":1,"place_name":"arora-square","city":"miami","state":"florida","c ...

javascriptjquery

Parsing JSON sub items in Android application using Java

Here is a snippet of my PHP file: <?php $myObj = array( "name"=>"John" , "age"=>"30" , "post"=>[ "title"=>"What is WordPress" , "excerpt"=>"WordPress is a popular blogging platform" , ...

javascriptphpandroidjsonhttpurlconnection

Validation of passwords in reactive forms using Angular Material Design Lite

I have a password field with specific validation requirements: The password must be alphanumeric It cannot consist solely of characters or numbers <p> <mdl-textfield label="Password" ...

javascriptangularangular-mdl

Avoid activating jQuery functions based on certain screen widths for menu/navigation system

Recently, I've delved into the world of jQuery and attempted to create a simple menu system. The menu is designed to expand its submenu when hovering over the list item at screen widths larger than 480px, and to expand when clicking on the list item a ...

javascriptjqueryhtmlcssnav

Issue Encountered While Attempting to Show a Div Element within a Function

Check out this HTML code snippet: <div class="div1" id ="div1" onclick="onStepClicked()" style ="text-align:center">Step 1</div> And here is the corresponding Script: function onStepClicked() { var elem = document.getElementById(&apo ...

javascripthtmlfunctiononclick

I am struggling to understand why clicking this button is not successfully submitting the form to Google Sheets

I am facing an issue with my Google Sheet setup that collects form data from my website. The problem is, I am unable to link the event to a button that already exists ('CompleteOrder'). Strangely, it works perfectly fine if I add a new button: & ...

javascripthtmlgoogle-apps-script

Vue.js displaying the error message: "The maximum size of the call stack has been exceeded"

Could you assist me in resolving this issue? router.js routes: [{ path: "", component: () => import("@/layouts/full-page/FullPage.vue"), children: [{ path: "/pages/login", name: "page-login", component: () => import("@/views/pages ...

javascriptvue.jsvuejs2routesvue-router

Establish a default v-model while utilizing vuelidate

Hey there! I have this input field, and I would like to use the computed state for the email as the v-model. Currently, I am using $v.emaill.$model from vuelidate. Is there a way to set this as the default v-model? html input.form-control(v-model="$v ...

vue.jsvuelidate