Formatting Numbers in Highcharts for Better Chart Values?

When passing values to a Highcharts pie chart, the code may look like this:

  series:[
        {
            type:'pie',
            name:'Ratio',
            data:[
                ['A', 42.6],
                {
                    name:'B',
                    y:14.2,
                    sliced:true,
                    selected:true
                }
            ]
        }
    ]

However, when displayed on the pie chart, it might show as follows:

A -> 75.00000000000001 %
B-> 25 %

While tooltips can be formatted in Highcharts, what about formatting the actual chart values?

javascripthighcharts

Answer №1

plotOptions.pie.dataLabels.formatter
is an essential function for customizing label formatting. By using this.percentage.toFixed(2), you can limit the number to two decimal places. Check out a live demo on this site

plotOptions: {
    pie: {
        dataLabels: {
            formatter: function() {
                return '<b>' + this.point.name + ': </b> ' + this.percentage.toFixed(2) + ' %';
            }
        }
    }
},

Answer №2

If you want to display the value as a number instead of a percentage, there are tooltip formatter options available.

Check out this link for more information: http://api.highcharts.com/highstock#tooltip.formatter

tooltip: {
   formatter: function() {
      return '<b>'+ this.point.name +'</b>: '+ this.point.y ;
   }
},

By using this.point.y, you can display the value as a number (instead of this.percentage).

Answer №3

Simply present it in the following way:

    card: {
    titleFormat: "Result: {card.value:.2f}"
}

resource for Highcharts customization tips

Answer №4

tooltip: {
   pointFormat: "Value: {point.y:.2f}"
}

this section pertains to displaying tooltips for the values. 

var newDataSet = [{
     name: 'Sales',
     data: [],
     dataLabels: {
         enabled: true,
         rotation: -90,
         color: '#FFFFFF',
         align: 'right',
         x: 4,
         y: 10,
         style: {
             fontSize: '13px',
             fontFamily: 'Arial, sans-serif',
             textShadow: '0 0 3px black'
         }, formatter: function() {
             return Highcharts.numberFormat(this.y, 2, '.');
         }
     }
}];

You can customize the formatting of the values within the dataLabels object in the dataset.

Answer №5


  tooltip: {
    pointFormat: "Displaying percentage value: {point.percentage:.2f}"
}

Obtain the exact percentage with this code snippet

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

Submit a document in headless fashion for the Robot Framework

Seeking assistance with uploading a file in headless mode using the robot framework libraries or code in Python, JavaScript, or AJAX for the following HTML snippet: <div class="mx-name-fileManager1 mx-fileinput mx-filemanager form-group no-columns" ...

javascripthtmlajaxfile-uploadrobotframework

Display hidden divs using sliding effect in Javascript

Is there a way to incorporate a slide effect in order to reveal my hidden div? function toggleInfo() { var info = document.getElementById("info"); if (info.style.display === "none") { info.style.display = "block"; } else { ...

javascripthtmlcss

JavaScript generates a series of checkboxes dynamically, all lined up in a single row

I am currently working on a script where I iterate over objects and aim to display the text of each object on a new line in the list format, along with a checkbox next to it. Despite successfully printing everything with a checkbox, the issue I am facing i ...

javascripthtml

Implementing hover effect triggered by keyboard input

Is there a way to create a hover effect on a div when a specific key is pressed on the keyboard using jQuery? <div id="d-up" class="button"></div> Appreciate any help with this! Thank you. ...

javascriptjqueryhtmlcss

Display the execution duration on an HTML document

Recently, I created a loan calculator using Javascript and now I'm contemplating on incorporating the time taken for the code to execute into the results. My intention is to have the execution time displayed on my HTML page, but I am unsure of how to ...

javascripthtmlcssbootstrap-4frontend

Enhanced slider functionality with the addition of multiple slick transitions

My layout features a question with 4 options. When any answer is clicked, a new slide is added and the layout transitions to that slide. $(document).on('click', '.goal1 li', function(e){ $(this).addClass('goal-selected'). ...

javascriptjqueryonclickappendslick.js

Decomposing a Vue.js API response into multiple variables

Utilizing vue to send http requests and store data in variables can be done like so: the api response will have the following structure: data: data: [id:1... etc] function: fetchOffers() { this.$http.get('http://127.0.0.1:8000/api/of ...

javascriptvue.js

After employing a forEach loop to generate a new array using the push method, the resulting array turns out to be devoid of any elements once the

I'm struggling to understand why my const becomes empty after a forEach loop. I've tried researching, but the answers I found didn't help me grasp the concept. I suspect it has something to do with JavaScript being asynchronous, but I can&ap ...

javascriptnode.jsecmascript-6

having trouble with npm installation of firebase-tools

I am encountering an issue while attempting to set up firebase-tools for my android studio project. Here is the error message that I am facing: Microsoft Windows [Version 10.0.15063] (c) 2017 Microsoft Corporation. All rights reserved. C:\WINDOWS&bs ...

javascriptnode.jsnpm

What is the proper way to retrieve the rootScope in Angular?

When looking at this code snippet, the controller is given an injected scope and rootScope. However, an error occurs on the last line with: ReferenceError: $rootscope is not defined angular.module("myEntity").controller('productsCtrl', [ &a ...

javascriptangularjs

Applying jQuery to deactivate blank categories within a sorted directory

I'm in the early stages of learning Javascript/jQuery. I have a list of items (specifically, course offerings) arranged in a UL. Each "course" is represented by an LI element. The list is filtered by categories using jQuery, which controls the visibil ...

javascriptjquerycheckbox

Active tab in HTML

In my implementation based on this example code from https://www.w3schools.com/howto/howto_js_tabs.asp, I have a specific requirement. I want the tab for "Paris" to remain active even after the page is refreshed if the user has clicked on the button for "P ...

javascripthtmljquerycss

The ngClass directive did not expect the token '=='

Hey everyone, I'm currently facing an issue while trying to use multiple expressions in my ng-class directive. Unfortunately, the browser console is throwing this error: Error: [$parse:syntax] Syntax Error: Token '==' is unexpected, expecti ...

javascripthtmlangularjsangularjs-directiveng-class

When attempting to replace a text node with a combination of text and HTML using replaceWith, an error stating "not a function" is triggered

I am dealing with multiple text nodes that need to have some text replaced with HTML: <pre>{ "data": [ { "source": "<a href=www.e.com>e.com</a>", "created_time": "2015-11-13T06:16:09+0000", ...

javascriptjqueryhtml

The submission form should trigger the submit event upon completion

I am facing an issue with a Vue login component failing a test: LoginForm should emit submit event Error: submit event should be emitted when submitting form expect(jest.fn()).toHaveBeenCalled() Expected number of calls: >= 1 Received number of cal ...

javascriptvue.js

Iterate through two jQuery collections at the same time

I am faced with the challenge of having two jQuery objects that are of equal length. var items = $('.item'); var details = $('.detail'); If these were traditional arrays, I could easily loop through them using their index, as shown be ...

javascriptjquery

Converting a JSON object into a Vue v-for friendly structure

My goal is to display data in an html table using the Vue.js v-for directive. However, I'm encountering issues with building the table. I suspect that the data format is incorrect, and I may need to manipulate it to eliminate the object layer (index o ...

javascriptvue.js

The fadeOut() function is not functioning properly as the div keeps reappearing even after attempting to

My navigation bar has a unique feature - the subnav expands to fullscreen on hover, while all other subnavs close. However, I encountered an issue with the close button functionality. When clicked, the subnav fades out but then immediately fades back in. ...

javascriptjquerycss

What are the different techniques for implementing React-Redux? Comparing Redux-thunk and Redux-Saga

My understanding of Redux is still quite hazy as I delve into various techniques and methods. I am curious to learn about other methods similar to redux-Thunk and redux-saga. Each utilizes distinct functions such as CreateSlice. I am interested to know w ...

javascriptreactjsreduxreact-redux

Update the div on the current page using externally retrieved information

Once again, I find myself stuck on a problem. Allow me to explain. Within this div, I have retrieved data using HTML SIMPLE DOM from another site. Like so: <div id="data">.....</div> Currently, the data refreshes whenever the user reloads th ...

phpjavascripthtml