Styling the numerical values displayed in tooltips within Highcharts

When using tooltip.pointFormat to display additional data in the tooltip, I noticed that only point.x is formatted correctly with a thousand separator.

Check out this jsFiddle for reference!

$(function () {
  Highcharts.setOptions({
    global: {
      useUTC: false,
    },
    lang: {
      decimalPoint: ',',
      thousandsSep: '.'
    }
  });
  $('#container').highcharts({
    xAxis: {
      type: 'datetime'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count}</b><br/>',
      shared: true
    },
    series: [{
      data: [{
        y: 20009.9,
        count: 20009.9
      }, {
        y: 10009.9,
        count: 20009.9
      }, {
        y: 40009.9,
        count: 20009.9
      }],
      pointStart: Date.UTC(2010, 0, 1),
      pointInterval: 3600 * 1000 // one hour
    }]
  });
});
javascripthighcharts

Answer №1

Discover the solution here.

Numeric values are displayed according to specific formatting rules inspired by the C library function sprintf. These formats are added within the variable brackets, separated by a colon. For instance:

  • Display two decimal places: "{point.y:.2f}"
  • Add thousands separator without decimal places: {point.y:,.0f}
  • Add thousands separator with one decimal place: {point.y:,.1f}

Hence, applying :,.1f inside the brackets will correctly format the number.

tooltip: {
  pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count:,.1f}</b><br/>',
  shared: true
}

jsFiddle

Answer №2

Instead of utilizing pointFormat, consider using the tooltip formatter function in conjunction with Highcharts.numberFormat method.

tooltip: {
            formatter:function(){

                return this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.options.count,1,',','.') + '</b><br/>' + 'Count: <b>'+Highcharts.numberFormat(this.point.y,1,',','.')+'</b><br/>';
            }
        },

For a practical example, visit this JSFiddle link.

Answer №3

In our situation, the tooltipFormatter function only applies formatting for the y property. I have discovered a few methods to add formatting not just for y.

  1. To include formatting for each tooltip and every property, you can use syntax like this: point.count:,.f

    pointFormat: '{series.name}: <b>{point.count:,.f}</b><br/>' + 'Count: <b>{point.y}</b><br/>',

  2. An alternative approach is to create a small extension like the following:

    (function (Highcharts) {
  var tooltipFormatter = Highcharts.Point.prototype.tooltipFormatter;

  Highcharts.Point.prototype.tooltipFormatter = function (pointFormat) {
    var keys = this.options && Object.keys(this.options),
        pointArrayMap = this.series.pointArrayMap,
        tooltip;

    if (keys.length) {
      this.series.pointArrayMap = keys;
     }     

    tooltip = tooltipFormatter.call(this, pointFormat);        
    this.series.pointArrayMap = pointArrayMap || ['y'];

    return tooltip;
  }
}(Highcharts));

Example

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

I'm seeking assistance with a frontend script problem. I'm curious if there are alternative approaches to coding this script that may be more effective. Can anyone offer guidance on this?

As a frontend developer specializing in script injection, I have been utilizing Adobe Target to inject scripts. However, this method presents several challenges: 1. It is difficult to debug code errors as my HTML and CSS are wrapped inside ' ' a ...

javascripthtmlcssfrontend

Enhancing jQuery Rating Plugin

Currently, I am working on customizing the jQuery Bar Rating System Plugin. You can view an example of the plugin by visiting this link: . The rating system on my end will resemble Example D. Rather than having the plugin based on user input, my goal is to ...

javascriptjqueryhtmlxslt

Clickable headline in Boostrap 5 accordion

I'm in the process of incorporating a clickable help feature into my Bootstrap 5 accordion, as shown in the following screenshot: https://i.sstatic.net/G8rDI.png The idea is to allow users to click on the question mark icon, which will then trigger ...

javascripttwitter-bootstrapbootstrap-5

Using Rxjs to handle several requests with various headers

I have a specific requirement where, if hasProcessado == true, 10 additional requests should be made before issuing the final request. If the final request fails, 3 more attempts are needed. Furthermore, when sending the last request, it is essential to n ...

javascriptangulartypescriptrxjs

Develop a personalized conditional rendering directive in Vue.js

I am exploring how to create a custom Vue conditional directive. While I could simply use a global method and call it within a v-if, I prefer the idea of having a dedicated directive for clarity in my code. My objective is to apply this directive to an el ...

javascriptvue.jsvuejs2

Utilizing Angular's capabilities to smoothly transfer objects between controllers

Currently, I am in the midst of developing an AngularJS application integrated with a C# Web API. I have two controllers: A and B. In controller A, there is a list of objects. When I click "Add" (in between two list items), I am redirected to controller ...

javascriptangularjs

Basic looping through a single item to showcase its properties and data

I have an object that looks like this: const people = { men: 4, women: 2, total: 6, participants: { 1: 4, 2: 1, 3: 0 } }; I am looking to display the following result: 1 participants count 4 2 participants count 1 3 participan ...

javascriptloopsreactjsecmascript-6

Rails database is not properly embedding into Javascript when using as_json.to_json method. (results in "&quot" characters)

I have scoured nearly every SO past question without success. Within my main.html.erb file, I am mixing html/erb/javascript. (I understand it's not ideal, but I'm still grappling with asset pipelines and this is just a small project.) My goal i ...

javascriptjqueryruby-on-railsruby

Translating PHP code into JavaScript

In my CodeIgniter setup, I have a PHP MySQL statement within a model: function getAllDevices() { $query = $this->db->query("SELECT * FROM Device_tbl ORDER BY Manufacturer"); return $query->result(); } After retrieving the data in the con ...

phpjavascriptjqueryjsonjquery-ui

Ways to create a clickable image without any hovering disruptions

I'm currently working on my first website using CSS3, HTML, and JS. Once I finish this version, I plan to switch to bootstrap after ironing out the bugs. However, I've hit a roadblock and could use some help. Here is the js fiddle link: https:// ...

javascripthtmlcss

Checking with jQuery Validate: displaying an error message if input matches a certain value

I spent 6 hours trying to figure out a solution to my issue. Currently, I am utilizing the jQuery Validation plugin. In my form, there is a password input field. When an AJAX request detects an incorrect password, another input field is set to a value of ...

javascriptjqueryhtmlajaxvalidation

Trouble selecting options in hierarchical data

I've been attempting to run this sample code for selecting an option from a select element with hierarchical data, but it seems to be having some issues. $scope.options = [ { id: 1, info: { label: "Item 1" } }, { id: 2, info: { label: ...

javascripthtmlangularjs

Importing a JavaScript file into another JavaScript file as text in React Native can be a convenient way

In my project, I have a file named MyFirstPage.js that contains the following code snippet: renderCards() { let icon = this.state.icon; .... .... .... } This code is responsible for rendering cards within the main render function. However, as the ...

javascriptreactjsreact-nativeecmascript-6

Optimizing Input Type Date (Calendar) Reactstrap for Minimum and Maximum Values

I'm in the process of integrating a Calendar feature into my website for scheduling appointments, and I need it to start from today and onwards. How can I achieve this using the Reactstrap component? I couldn't find any relevant information in th ...

javascriptreactjsbootstrap-4calendarreactstrap

Error message: Type validation failed - anticipated a string for built-in components or a class/function for composite components, instead received undefined

When trying to create a Navigation bar and running npm dev, it renders perfectly but the console displays the following warning: Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite componen ...

javascriptreactjsnext.jsjsx

Is there a way to reach a different function within the value of the react Context.Provider?

Right now, I am learning how to utilize the react context API. Within my react Provider class, I have some state data and functions stored in the value={}. But I am curious, how can I call a function inside this value from another function within the same ...

javascriptreactjs

What steps can I take to identify and rectify mistakes in this instance

When working with a router and two asynchronous fetches from the database, how can errors be effectively caught in this scenario? router.get('/restaurant/:id', async (req, res, next) => { var current_restaurant = await Restaurant.findOne( ...

javascriptnode.jsexpressmongooseasync-await

Cufon: Hovering on links causes them to resize and remain in that new size

I've encountered an issue with text links in a paragraph that are being replaced using Cufon. When I hover over the links, the text inside them expands and remains that way even after moving the cursor away. The color change applied to the hover state ...

javascriptcsshyperlinkcufon

Disallow the use of punctuation marks such as dots, plus signs, minus signs, and the letter 'e' when entering

Is there a way to restrict the input of a dot, plus sign, minus sign, or letter 'e' when using semantic-ui-react library? I have searched for solutions but have not found any that work. Can someone provide assistance with this issue? ...

javascripthtmlreactjssemantic-ui-react

What steps can I take to trigger a 404 error instead of a cast error?

My route is defined as /mysafe/idofthemodel. When the idofthemodel is not found, it throws a cast error Cast to ObjectId failed for value "something" (type string) at path "_id" for model "modelname". Instead of this error, I ...

javascriptnode.jsmongodbexpressmongoose