Show information from a JSON file in a tooltip on a Highcharts' pie chart

I have a pie chart that shows two percentages. I am looking to update the tooltip content to display information from my JSON data. Here is an example of how my JSON data looks:

{"object1":{"percentage": 0.7, "numberOfObject": 167}, "object2":{"percentage": 0.3, "numberOfObject": 125}}

Currently, the pie chart displays the percentages like this:

jsonValue.object1.percentage and jsonValue.object2.percentage

My goal is to show the "numberOfObject" value for each object when hovering over their respective parts of the chart.

javascriptjsonhighchartstooltippie-chart

Answer №1

When it comes to the tooltip feature:

tooltip: {
                    formatter: function() {
                if (this.point.name === 'item 1')
                    return '<b>' + jsonValue.item1.quantity + '</b>';
                else
                    return '<b>' + jsonValue.item2.quantity + '</b>';
            }
}

As for the dataset:

data: [
                ['item 1', jsonValue.item1.percentage],
                ['item 2', jsonValue.item2.percentage]
]

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

Error: The bun.js application encountered a SegmentationFault at line 188

I'm attempting to execute the following command on my current repository, which already has a registry set up in the .npmrc. bun install -y The purpose of the -y flag is to generate the yarn v1 lockfile. However, it's resulting in the followin ...

javascriptnpmnpm-installyarn-lock.jsonbun

Baffled by the data visualization produced by Google Chart using information from

Perhaps I'm being a bit ambitious, but I managed to create a basic Chart using GoogleCharts. The problem is that I have to input the values manually, but I want to retrieve them from the Database. I know JSON can accomplish this, but I've spent f ...

javascriptjsonchartsgoogle-visualization

What is the solution to having a div move along with window resizing without displacing adjacent divs?

After much effort, I still can't seem to get this working correctly. I've been playing around with a section named "RightExtra" and a div inside it called "RightExtraContent". My goal is to allow these two divs to move freely when the window is ...

javascriptjqueryhtmlcss

Tips for avoiding automatic updates to .js scripts after pressing F5

Is there a method to stop a JavaScript script from resetting when the user refreshes the page? For instance, if I have a picture slider that is constantly changing images, I would like the script to continue where it left off instead of starting over wit ...

javascriptjquery

Retrieving the final element of a JSON using Python

I am encountering issues with files structured as follows: { "function": "ComAl_Set_nad_crtl_xcall_state", "timeStamp": 1488500329974, "Param1": "SIG_NAD_XCALL_ATTEMPTS_COUNT", "Value1": "2" } These specific JSON files are generated by ce ...

pythonjson

Encountered a module build failure due to the inability to resolve the 'bootstrap-sass' module, a required installation when configuring bootstrap version v3

Encountered an error while building an angular project: ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js Module build failed: Error: Could not resolve module 'bootstrap-sass' which must be installed when bootstr ...

javascriptnode.jsnpmbootstrap-4bootstrap-loader

Encountered JSON serialization issue while attempting to generate a Luigi task flow

I'm attempting to streamline the processing of multiple Jupyter notebooks using Luigi, but I've encountered an issue. I have created two classes. The first one is called transform.py: import nbformat import nbconvert import luigi from nbconver ...

pythonjsonserializationjupyterluigi

The website doesn't give my codes enough time to execute fully

I have a series of commands that I need to execute: Retrieve cookie from the browser using the JS Cookie plugin in mypage.php Validate its value with Ajax and my PHP scripts in myapi.php Set certain SESSION variables in myapi.php Utilize the values store ...

javascriptphpajaxcookies

Error in the syntax containing ?callback=jQuery1113

I'm attempting to initiate a simple JSONP query: <html> <head> <script type="text/javascript" src="js/jquery1.js"></script> <script> $(document).ready(function(){ $.ajax({ ...

javascriptjqueryajaxinternet-explorer-8

Utilizing @PathVariable in Spring to handle Strings with IP addresses without needing a trailing slash

This snippet is a segment of my controller code: @RequestMapping(value="/json/getPCs/{serverAddress}", method=RequestMethod.GET) public @ResponseBody List<PC> getPCForServerJSON(@PathVariable String serverAddress) { logger.info("Server address: ...

javajsonspringurlpath-variables

What is the process for creating nested nests within nests using Elastic Search mapping?

Looking to create an Elastic Search Mapping that accurately represents the following JSON structure: JSON: {"user_id":{ "data_flow_id_1":[ {"file_location": "C:/ewew","timestamp": "2019-01-01T00:00:00"}, {"file_location": "C:/ewew2", ...

jsonpython-3.xelasticsearchrelationship

Tips for retrieving a variable from an XML file with saxonjs and nodejs

I came across an xml file with the following structure: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE agent SYSTEM "http://www.someUrl.com"> <myData> <service> <description>Description</description> < ...

javascriptnode.jsxmljsdomsaxon-js

The LinkedIn API encountered an error when attempting to retrieve historical follower data, resulting in a HTTP

I've scoured the depths of the internet in search of a solution to my problem, but none seem to fit what I need. My goal is to retrieve historical follower data from LinkedIn's API using this call: ${companyId}/historical-follow-statistics?time- ...

javascriptrestapiexpresslinkedin-api

Experiencing a ResponseStatusLine issue while trying to download a .json file from an API site

Recently, I set out to develop a small app using the Discogs API for my own personal use. The aim was to easily search for individual artists and their albums. Thanks to an unofficial Discogs C# app, I was able to achieve this successfully. However, I enco ...

c#jsonhttp-headershttprequest

Execute AngularJS $q.all, regardless of any errors that may occur

Is there a way to ensure $q.all is triggered even if the promises return errors? I'm working on a project where I need to make multiple $http.post requests, sending user-inputted values from text fields. The backend (Django REST framework) has a valu ...

javascriptangularjspromiseangular-promise

Is there a way to automate the testing of a Rails app using actual XML and JSON request/response data in order to generate API documentation?

It's important to show kindness to the consumers of our web service by providing them with useful examples, even though it can be challenging to maintain a large XML request test. What are some effective ways to ensure we are being good WS providers? ...

ruby-on-railsxmljsonintegration-testing

What might be preventing combineLatest from executing?

Currently, I am attempting to run a block of code utilizing the combineLatest function. Within my translation library, there exists an RXJS Observable that is returned. Imported as individual functions are combineLatest, map, and tap. combineLatest(this. ...

javascriptangularrxjsreactivex

The subscription for the second Observable in RxJS concatMap is triggered individually

I am currently developing an Angular 6 application. I want the app to display a loading animation whenever there is a change in the route or if there are any pending HTTP requests. To achieve this, I have set up two Observables as follows: For httpPendingR ...

javascriptangulartypescriptrxjs

Manipulating Object origin data

I'm unsure if this can be achieved. I am aiming to create a header and footer that remain the same while only switching the content pages. The resources I have at my disposal cover HTML, JS, CSS, and JQuery. Below is a simplified version of my curre ...

javascripthtml

The Vite manifest file could not be located in the designated path: C:xampphtdocslolaboutpublicuild/manifest.json

"Error: Vite manifest not found at: C:\xampp\htdocs\vrsweb\public\build/manifest.json" Please start the development server by running npm run dev in your terminal and refreshing the page." Whenever I attempt to acce ...

jsonlaravelweblaravel-livewire