% unable to display on tooltip pie chart in highcharts angular js

https://i.stack.imgur.com/Ccd7h.png The % symbol isn't displaying correctly in the highcharts

ageData = {
  chartConfig: {
    options: {

      chart: {
        type: 'pie',
        width: 275,
        height: 220,
        marginTop: 70
      },
      plotOptions: {

        pie: {
          size: 100,
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            style: {
              color: '#2A9ACC',
              fontFamily: 'proximanovalight',
              textShadow: 0
            }
          }

        }
      }
    },

    title: {
      text: 'Age',
      style: {
        color: '#2A9ACC',
        font: '16px proximanovalight'
      }
    },

    tooltip: {

      pointFormat: '{series.name}: <b>' + this.point.percentage + ' % </b>'
    },
    series: [{
        name: "Age",
        minPointWidth: 20,
        showInLegend: false,
        colorByPoint: true
      }

    ],
    loading: false
  }

}

I've tried adding a tooltip formatter based on some suggestions but it hasn't worked. Not sure why this issue is happening. If more information is needed, please let me know. Any assistance would be greatly appreciated. Thank you in advance.

Answer №1

As detailed in the Highcharts Pie documentation, it is recommended to modify the following line:

pointFormat: '{series.name}: <b>' + this.point.percentage + ' % </b>'

You can update it to something similar to this:

pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

Answer №2

Hey there! I managed to find a solution to the problem at hand. It turns out that I need to specify the tooltip within the options section of the configuration like this:

                                        chartConfig : {
                                                                    options : {

                                                                        chart : {
                                                                            type : 'pie',
                                                                            width : 275,
                                                                            height : 220,
                                                                            marginTop : 70
                                                                        },

                                                                        tooltip : {
                                                                            pointFormat : '{series.name}: {point.percentage:.1f}%',
                                                                        },
                                                                        plotOptions : {

                                                                            pie : {
                                                                                size : 100,
                                                                                allowPointSelect : true,
                                                                                cursor : 'pointer',
                                                                                dataLabels : {
                                                                                    enabled : true,
                                                                                    style : {
                                                                                        color : '#2A9ACC',
                                                                                        fontFamily : 'proximanovalight',
                                                                                        textShadow : 0
                                                                                    }
                                                                                }

                                                                            }
                                                                        }
                                                                    },

                                                                    title : {
                                                                        text : 'Age',
                                                                        style : {
                                                                            color : '#2A9ACC',
                                                                            font : '16px proximanovalight'
                                                                        }
                                                                    },

                                                                    series : [ {
                                                                        name : "Age",
                                                                        minPointWidth : 20,
                                                                        showInLegend : false,
                                                                        colorByPoint : true
                                                                    }

                                                                    ],
                                                                    loading : false
                                                                }

Thank you all for your assistance. It is greatly appreciated.

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

Issue with jQuery AJAX call: When submitting an HTML form, control is not being returned to the calling

I am facing an issue with my HTML form where it is loaded correctly into the DOM through a jQuery ajax call. The problem arises when I submit the form data to a PHP module using another jQuery ajax call. Even though the network traffic shows that the form ...

Encountering a CORS issue when utilizing Stripe with various servers while navigating with a Router

I have a router that utilizes Router.express(). The backend operates on port 5000, while the frontend runs on port 3000. Within the frontend folder, there is a button with a fetch request (http://localhost:5000/create-checkout-session). In the backend, the ...

Apply jQuery styling to new select box on page in order to maintain consistent styling throughout

I've encountered an issue with my jQuery select box styling. It appears to work perfectly on the initial page load, but when new content containing a select box is dynamically loaded onto the page, the styling doesn't get applied to it. Can anyo ...

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

Increasing and decreasing the display of content using JQuery based on height rather than character count

I'm attempting to create a show more/show less link with a set height of 200px that, when clicked, will reveal the rest of the content. Anything exceeding 200px will be hidden, and there will be a "show more" link to display the remaining text. I&apos ...

Including a Javascript library (jsencrypt) in an Angular 2 application

I have gone through countless tutorials on this particular issue, but unfortunately, I have not yet found a solution. Let me provide some context first. I am working on an Angular 2 application and I need to incorporate this JS library for encryption: http ...

Are there any drawbacks to converting all instance methods into arrow functions in order to prevent binding loss?

What are the potential drawbacks of converting all instance methods into arrow functions to avoid the "lost binding" issue? For example, when using ReactJS, the statement onClick={this.foo} can lead to lost binding, as it translates to createElement({ ... ...

Angular.js login redirection post authentication

I am finding it confusing on how to handle page redirection after successfully logging in using passport. Below is the node.js code snippet: app.post('/auth/login', passport.authenticate('local', { successRedirect: '/index.h ...

What is the process for implementing a fallback image in Material UI?

Hey there! I'm currently looking to customize the fallback image of a Material UI Avatar with my own original image. Does anyone have any tips on how I can achieve this? const fallbackImage = "../../fallback/img.png" const AvatarWithBadge = ...

We apologize for the inconvenience, but please address the upstream dependency conflict before proceeding. You may also choose to use the --force or --legacy-peer

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="532b3e2a2c3bf48d454345584b4348454242404443472c525e7d1d010f13270">[email prote ...

Unable to install vue-property-decorator

When attempting to set up Vue and TypeScript with class style using vue-property-decorator, I encountered a strange script after creating the project. I was anticipating a script like this: <script lang="ts"> import {Component, Vue} from & ...

Could there be any issues with the structure of my mongoose schema?

I've been stuck for 3 hours trying to solve this problem. I can't seem to retrieve any data from my document. var mongoose = require('mongoose'); var Schema = mongoose.Schema; var accountSchema = mongoose.Schema({ username: String ...

Refreshing local storage memory on render with a custom Next.js hook

I recently developed a custom Next.js hook named useLocalStorage to store data in local storage. Everything is working fine, except for one issue - the local storage memory gets refreshed with every render. Is there a way to prevent this from happening? ...

What is the process for modifying the headers of a post request in Express when

I have a Node/Express application and I'm looking to incorporate an image upload feature into an order form. While I can successfully use the action link in the HTML form to perform a POST request, I also want my JavaScript file associated with this ...

What is the best way to display a list of items in Vue JS while maintaining the

Looking to display my Vue.js list in reverse order using v-for without altering the original object. The default HTML list displays from top to bottom, but I want to append items from bottom to top on the DOM. Telegram web messages list achieves this wit ...

Utilizing a switch statement in Jquery to target specific input elements for focus

My Objective As a user presses enter, I want to target specific input elements with a data-index attribute value between 0-2 and of type text. Then, I plan to check their attribute values using a switch statement to perform certain actions. Presented bel ...

Check the validity of your JavaScript files with our convenient online tool!

Is there a website or online tool available to validate the syntax of JavaScript code in a file? I am experiencing problems with Internet Explorer 7 while running JavaScript, so I want to make sure my JavaScript file is valid. ...

Tips for concealing an input IP Address in React

Looking for suggestions on an IP Address mask input solution. The format might vary between 999.99.999.99 and 99.9.99.9, but react-input-mask does not support varying lengths. Any recommendations? ...

A fresh perspective on incorporating setInterval with external scripts in Angular 7

Incorporating the header and footer of my application from external JavaScript files is essential. The next step involves converting it to HTML format and appending it to the head of an HTML file. private executeScript() { const dynamicScripts = [this.app ...

Failed to fetch http://localhost:8000/Stack/script.js due to network error 404 in Django project

As I embark on creating a simple to-do app, I encountered an error while trying to implement some JavaScript on the homepage. The error in question is highlighted above (Get http://localhost:8000/Stack/script.js net:: Err_Aborted 404). Being new to integra ...