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

Node-static is reporting that the localhost page cannot be located

I am currently attempting to serve static files using node-static. My plan is to eventually run this as a Windows service using nssm. I have successfully executed this process in the past, however for some reason it is not working now. Here is the code sn ...

javascriptnode.jswebservernode-static

The incorrect sequence of Angular/Protractor functions is causing issues within the tests

Trying to extract the values from a column in a grid and compare them before and after sorting can be tricky. I have two functions set up for this task - one to retrieve the initial column values, and another to check the order post-sorting. However, there ...

javascriptjqueryangularjsangularprotractor

"Retrieve the most recent information without refreshing the page by employing the Vue script setup along with Axios after submitting data

Looking for assistance as I am new to working with vue.js. I currently have 2 Vue files that serve different purposes: Greetinglist.vue, which retrieves data from an API using axios.get Greeting.vue, responsible for posting data using axios.post Upon su ...

vue.jsvuejs3vue-composition-apivue-script-setup

Tips for showcasing the content of a variable

Extracts information from a collection: const pageTitles = { homePage: 'Main' ... } export default pageTitles When I attempt to display it like this: <div><span>{{pageTitles.homePage}}</span></div> everything funct ...

vue.js

Browser tries to interpret Javascript code as a file organization system

Encountering an issue while trying to load my website. When I open index.html in my browser, I receive a problem loading page message. This response is puzzling as it does not indicate a file loading error. Here's a snippet of the response: Firefox c ...

javascriptjqueryhtmlgoogle-maps

Guide to handling multiple forms within a single template using Express

If I have an index.html file containing two tables - "Customers" and "Items", along with two forms labeled "Add customer" and "Add item", how can I ensure that submitting these forms results in a new entry being added to the respective table as well as t ...

javascriptexpress

Execute the function numerous times that is associated with an asynchronous function in JavaScript

I am currently working on two functions: one is asynchronous as it fetches data from a CSV file, and the other function renders a list of cities. The CSV file contains information about shops located in various cities. My goal is to display a list of cit ...

javascriptcsvasynchronousfetch

Interconnected realms communication

I'm currently in the process of developing a Facebook iframe app. At one point, I initiate a friends dialog from Facebook and embed an HTML button to add some customized functionality for my app. dialog = FB.ui({ method:'fbml.di ...

javascriptcross-domain

Incorporating OpenRouteService into an Angular application on Stackbliz

I am encountering an issue with integrating OpenRouteService into my Stackblitz application. The component code is as follows: import { Component, OnInit } from '@angular/core'; import {Location} from '@angular/common'; import {Openro ...

javascriptangularapinpm

Using Express.js to send a response while simultaneously executing a background task

When working with Express.js, I have a need to execute a task after sending a response. My main goal is to minimize the response time and send back the response immediately without waiting for the task results to be returned to the client. The task itself ...

javascriptnode.jsexpress

The nuSelectable plugin enhances the functionality of jQuery

I am currently experimenting with the jQuery nuSelectable plugin in order to enable users to select multiple items simultaneously. Unfortunately, I am encountering difficulties in making the selection work as intended. You can find the plugin here. After ...

javascriptjqueryhtmlcss

How to store an imported JSON file in a variable using TypeScript

I am facing a challenge with a JSON file that stores crucial data in the following format { "login": { "email": "Email", "firstName": "First name", "lastName": "Last name", ...

javascriptjsonangulartypescriptcypress

Changing array indices in JavaScript by splicing elements

I'm experiencing a curious issue that seems to involve overwriting array indices after splicing, or at least that's what I suspect. This problem arises in a small game project built using phaser 2 - essentially, it's a multiplayer jumping ga ...

javascriptexpresssocket.ioaliasphaser-framework

Enable search functionality for jQuery Select2 values that have been formatted by a formatter function

Trying to use a formatter with select2 for better alignment of code and description elements, but the plugin seems to be searching based only on the description rather than the entire text. This may be because it's only looking at the original <opt ...

javascriptjqueryjquery-select2

The split function of a string displays an undefined result

My goal is to extract all characters that come after the equal sign within a URL: let url = this.$route.query.item console.log(typeof(url)) // outputs string let status = url => url.split('=')[1] When I run the code, it shows &apo ...

javascriptvue.jsecmascript-6vuejs2vue-router

One way to retrieve API responses in node js is by utilizing callback functions

I am currently exploring callback functions and utilizing the request module in node js to retrieve information. As Javascript is asynchronous, I am struggling with how to properly return my response. Below are snippets of my code. In my app.js file: var ...

javascriptnode.jsrest

Ajax fails to send requests to PHP after changing the URL directory

After struggling to find a solution to my query, I have come to the realization that it has not been asked before. Despite enabling rewrite rules on my apache2 server in the .htaccess file located in the root directory, I am facing an issue with my ajax sc ...

javascriptphpajax

Securing Node function parameters in an asynchronous environment

I've been grappling with a pressing question lately, and I just can't seem to find a definitive answer. Let me share with you a Node function that I frequently use. It manages web requests and conducts some input/output operations: function han ...

javascriptnode.js

Using jQuery to insert a div class with PHP referenced

My variable stores a color name. Here is an example: <?php $myvar = blueColour; ?> I want to apply this value to the body of an html page using jQuery: <script type="text/javascript"> jQuery(body).addClass("<?php echo $myvar; ?>"); < ...

javascriptphpjqueryhtmlwordpress

Select multiple options by checking checkboxes in each row using React

Is it possible to display multiple select checkboxes with more than one per row? For example, I have four options [a, b, c, d]. How can I arrange it to have 2 options per row, totaling 2 rows instead of having 1 option per row for 4 rows? ☑a ☑b ☑c ...

javascriptcssreactjsmaterial-ui