% 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.

javascriptangularjshighchartspie-chart

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

Automatically update the div every few seconds and pause when it has loaded successfully

I am facing a challenge in creating a div that refreshes automatically every 10 seconds, but stops when it successfully loads. Here is the jQuery script I have developed: <script type="text/javascript"> $(document).ready(function(){ var j = jQuer ...

javascriptphpjqueryhtml

What is the best way to store a WAV Blob in MongoDB, fetch it accurately, and serve it using Node

While there are many resources available on saving binary files using the Mongoose Buffer SchemaType, most of them focus on image files. I have encountered difficulties in making it work with a WAV audio file. Currently, I am utilizing Recorder.js to stor ...

angularjsnode.jsmongodbmongooserecorder.js

alter objective response

Currently, I am in the process of developing an educational game for children inspired by the classic "whack-a-mole" style. In this game, kids are presented with a math question and must click on the correct number that appears to solve it. For instance, i ...

javascriptjquery

Tips and tricks for bypassing the annoying "save as" popup while downloading files remotely using SauceLabs

Running a protractor spec from a Jenkins job, connecting to SauceLabs to click a button for downloading a PDF file, and verifying the successful download. Struggling to prevent the chrome browser from displaying a "Save As" prompt when using an absolute pa ...

angularjsnode.jsjenkinsprotractorsaucelabs

Parsing JSON stored in local storage and converting it to a Fabric JS object - JSON generated from form inputs

Currently, I am facing some challenges while using Fabric js for a project that I am working on. My main goal is to create a form where users can input details, which will then be converted into a JSON object and stored locally. After submitting the form, ...

javascriptjsonlocal-storagedeserializationfabricjs

An error being thrown within the error function of $http during a unit test is triggering a $digest already in progress

Have a look at this Plunker showcasing the issue: http://plnkr.co/edit/J8zRIj?p=preview If you check out this other Plunker where the error is no longer present in both scripts.js and scripts.spec.js, you'll see that the $digest error is resolved: ...

unit-testingangularjsjasminekarma-runner

Combining Various Data Types in a Flexible List

I'm looking for a way to dynamically add rows to a table. Right now, I have the input type on the server (whether it's int, bool, string, etc), but I want to know how to implement a field accept combobox. Here is the code in cshtml: <tr ng-r ...

javascriptangularjs

Protractor problem: difficulty scrolling into an infinite scroller

For a protractor test, I am attempting to find a record in my infinite scroller component using the code below: searchPage.searchEntitlement('search criteria'); var myHiddenElementInScroller = element(by.repeater('result in ctrl.result ...

angularjsprotractorangularjs-e2ee2e-testing

To ensure a rectangular image is displayed as a square, adjust its side length to match the width of the parent div dynamically

How can I make the images inside my centered flexbox parent div, #con, be a square with side length equal to the width of the parent div? The image-containing div (.block) is positioned between two text divs (#info and #links). I want the images to be squa ...

javascripthtmljquerycss

Using jQuery to iterate through elements of a PHP array

I've got a PHP array that outputs like this: Array ( [0] => Array ( [title] => Much title [end] => Such end [start] => Very start ) [1] => Array ( [title] ...

javascriptphpjqueryarrays

Place attribute value directly under the border of an HTML element using a combination of JavaScript and CSS

I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type ...

javascripthtmlcss

Coming back from retrieving data from an API

I'm having trouble with a function that performs a POST request to retrieve access tokens from an API. Although the function successfully prints the token to the console, I haven't been able to figure out how to properly parse and save the access ...

javascriptnode.js

Moving a div with arrow keys using percentages: A step-by-step guide

I found this amazing script on Stack Overflow that allows me to move elements around the page using arrow keys. It works flawlessly, and I love how it enables diagonal movement by combining different arrow key inputs. Now, my query is whether it's fe ...

javascriptjqueryhtmlresponsive-design

Storing the result of parsing JSON data into a global variable

$(function() { var countFromData = 0; getReminder(); alert(countFromData); }); function getReminder() { $.getJSON("<?=base_url()?>home/leavereminder", {}, function(data) { ...

javascriptjqueryjson

Looking to retrieve the full browser URL in Next.js using getServerSideProps? Here's how to do

In my current environment, I am at http://localhost:3000/, but once in production, I will be at a different URL like http://example.com/. How can I retrieve the full browser URL within getServerSideProps? I need to fetch either http://localhost:3000/ or ...

javascriptreactjsnext.js

Is there a way to implement seamless scrolling within an absolute element using Jquery?

Hey there! I recently implemented smooth scrolling on my website, but it seems to only work on single-page layouts. How can I make it function properly within an absolutely positioned scrollable element? Here are the link to my website and the correspond ...

javascriptjqueryhtml

Tips on preventing flickering when using javascript for drag and drop functionality

I have implemented the following JavaScript code (using jQuery) to manage drag and drop functionality in a script I am developing: jsc.ui.dragging = false; jsc.ui.drag_element = {}; $(".drag-target").mousedown(function() { jsc.ui.drag_element = $(thi ...

javascriptjquerydrag-and-drop

Steps to have index.html display when running the build command in a Svelte project:

Greetings everyone, I'm brand new to using Svelte and have a question that's been on my mind. I recently developed a small app in Svelte that works perfectly fine during development. However, when I run npm run build for production, the output ...

javascriptnpmsvelte

Ensuring that md-select(s) created through ng-repeat are linked to the same model

<div ng-repeat="(key, value) in dataSet | groupBy: 'partner.partnerName'"> <md-select ng-model="userName" placeholder="{{ key }}" class="partnerUser" > <md-option >{{ key }} </md-option> <md-option ng-repe ...

javascriptangularjs

Update the JavaScript to modify the styling based on the specific value of the

Is there a way to apply specific style properties to images only if they already have another property? I've managed to achieve this with the following code snippet: if ($('#content p img').css('float') == 'right') $ ...

javascriptjquerycsshtml