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

Separate every variable with a comma, excluding the final one, using jQuery

I've developed a script that automatically inserts checked checkboxes and radio options into the value() of an input field. var burgerName = meat + " with " + bread + " and " + onion + tomato + cheese + salad; $('#burger-name').val(burger ...

javascriptjquery

There was an issue locating a declaration file for the module 'clarifai'

https://i.stack.imgur.com/PgfqO.jpg I recently encountered a problem after installing the Clarifai API for a face recognition project. Despite my efforts, I have been unable to find a solution. When I hover over "import clarifai," I receive the message: ...

javascriptnode.jsreactjsnpmclarifai

Using pdfkit to create a PDF and then returning it as a base64 string from a function

I am attempting to utilize PDFKit to produce a PDF file and then retrieve it as a base64 string. Here is the code snippet I am using: function generatePDFDocument(data){ let doc = new PDFDocument(); var bufferChunks = []; doc.on('readabl ...

javascriptnode.jspdfpdfkitnode-pdfkit

What is the best way to display an international phone number using Angular Material V6?

I've been working on a project that utilizes Angular Material V6. My goal is to display international phone numbers with flags in a Material component text box. After some research online, I came across an npm module that achieved this but it was tail ...

javascriptjqueryangular5angular-material2

Utilizing a TypeScript function to trigger an action from within a Chart.js option callback

Currently, I am utilizing a wrapper for Chart.js that enables an animation callback to signify when the chart has finished drawing. The chart options in my code are set up like this: public chartOptions: any = { animation: { duration: 2000, ...

javascriptchartstypescriptangularchart.js

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

Does anyone know how to center the item I click in a carousel? I've searched high and low for a solution but couldn't find a clear answer. Can someone please assist me with this? This is what I have tried so far: http://jsfiddle.net/sp9Jv/ Here ...

javascriptjquerycsscarousel

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

Clicking on a DIV using jQuery, with anchor elements

I have a method for creating clickable divs that works well for me: <div class="clickable" url="http://google.com"> blah blah </div> Afterwards, I use the following jQuery code: $("div.clickable").click( function() { window.location ...

javascriptjquery

the pause in execution before my function redirects to a different route

Currently, I am developing a page using nodeJs with express which is supposed to display a table. However, I encountered an issue with my variable "allMusique" that contains the data for my page. When trying to access it initially, there seems to be an err ...

javascriptnode.jsexpressroutes

Transforming the MySQL result array into JSON format

I am looking to transform the array result retrieved from my database query into JSON format using PHP. Below is the code snippet I am currently working with: $row = mysql_fetch_array($result) My goal is to convert the variable $row into JSON format and t ...

phpjsonmysqliresultset

Obtaining a subset of data from firebase

I am currently working on retrieving a sub-collection from the Firestore database using Angular. In my database, I have a collection called 'Company' which contains fields for 'Name' and 'Id', as well as a sub-collection named ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Tips for avoiding an automatic slide up in a CSS menu

Is there a way to disable the automatic slide-up effect on my CSS menu when clicking a list item? I have tried using stop().slideup() function in my JavaScript code, but it doesn't seem to work. Additionally, I would like to highlight the selected lis ...

javascriptjquerycss

How can I access an InputStream from a local XML file in a PhoneGap application?

Looking for advice on how to fetch an inputstream from a local XML file using JavaScript in my PhoneGap application. I'm new to JavaScript, so any guidance would be appreciated! ...

javascripthtmlcordova

Creating standard forms of AnyVal types using Circe

Is it possible to derive Encoder instances for value classes? I am having trouble deriving nested classes using the semiauto mechanism. Consider the following case class structure: { case class Recipient(email: Recipient.Email, name: Recipient.Name) ...

jsonscalacirce

When utilizing Vue JS, each key value of one computed property can trigger another computed property to run

I have a computed property: getRelatedItem () { return this.allItems.find((item) => { return item.id === this.currentSelectedItemId }) }, Here is an example of the output: relatedItem:Object -KQ1hiTWoqAU77hiKcBZ:true -KQ1tTqLrtUvGnBTsL-M:tr ...

javascriptvue.jsvuejs2vue-component

Having trouble adding global method using Plugin in Vue 3?

I have been working on creating a method that can generate local image URLs to be used in any template automatically. However, I encountered an issue while trying to develop a plugin that adds a global property. Plugin Implementation: // src/plugins/urlb ...

javascriptvue.jsvuejs3

Synk: the presence of a self-signed certificate within the certificate chain

Recently, I've been encountering the error message Synk Protect is showing "self-signed certificate in certificate chain" when I try to run npm install on a project of mine. Would appreciate any help or tips on how to identify which out of the 984 pac ...

javascriptnpm

Having trouble retrieving data from the PokeAPI

Currently, I am experimenting with PokeAPI for educational purposes and attempting to run the following code: const express = require('express') const https = require('https') const app = express() const port = 3000 app.get('/&apo ...

javascriptnode.jsexpress

What is the best way to eliminate a duplicate item from the shopping cart without actually deleting it?

I developed an e-commerce platform with a cart feature using the context API. However, I encountered an issue where removing one item from the cart also deletes another item if there are two of the same items in the cart. How can this be prevented? Below ...

javascriptreactjs

Converting Imgur API's JSON output to a CSV file using Python

I am relatively new to Python and coding in general, but I managed to successfully access the Imgur API and retrieve a JSON output file. My ultimate objective is to merge this file with some existing data in Excel, so I need to convert the API output into ...

pythonjsoncsvexportimgur