How do I link a pre-determined value to a data point using Highcharts?

For example, consider a scenario where a dynamic chart contains values that need to be displayed in different formats for tooltips. Is it possible to pass a pre-formatted value along with the raw numeric value in some way?

For instance, in a sales Pie chart series, the value could be ["Store 1", 3665.54] and the tooltip could display $3,665.54.

pointFormat: '{series:name}: <b>${point.total}</b>'

However, a quantity may require a different format without the Dollar sign.

pointFormat: '{series:name}: <b>{point.total}</b>'

Alternatively, a Formatter function could be used, but what if the value is already pre-formatted as a String for display? How can a pre-formatted value be associated with a data point?

javascripthighcharts

Answer №1

To accomplish this task, simply adjust the valuePrefix within the desired series.

Answer №2

Customize the pointFormat for each series with the following code snippet: http://jsfiddle.net/g4gqs/

    series: [{
        name: 'elephants',
        tooltip: {
            pointFormat: '{series.name}: <b>3 x {point.y}</b><br/>'
        },
        data: [500, 700, 900, 1100, 1300, 1500, 1700, 1900, 2100, 2300, 2500, 2700]
    }, {
        name: 'lions',
        tooltip: {
            pointFormat: '{series.name}: <b>5 x {point.y}</b><br/>'
        },
        data: [500, 700, 900, 1100, 1300, 1500, 1700, 1900, 2100, 2300, 2500, 2700].reverse()
    }]

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

Show the button's value on the text box using JavaScript

When using bootstrap, I encountered an issue where the value of a button would display in a textbox upon clicking it, but then quickly disappear. This unexpected behavior left the textbox empty prematurely. <input type="submit" value="5000t "class="btn ...

javascriptjquerytwitter-bootstrap

To utilize the span and input text increment functionality, simply use the required input type number and hold either the up or down arrow

Is it possible to increment the value of an input type number by 1 when holding down on a mobile device? <input type="text" id="number" value="1"> <span id="upSpan"> Up </span> $('#upSpan').on('touchstart', function ...

javascriptjqueryjquery-mobiletouch-event

Can you provide a database of words for different cities, towns, and countries in MongoDB (or in JSON

Currently, I am in the process of developing an application that utilizes MongoDB. One specific feature I am working on implementing is an 'auto-suggest' functionality on the front-end. For example, as a user begins to type the first few letters ...

phpjavascriptjquerymongodblithium

Converting ed25519 private key into OpenSSH Format using JavaScript

After generating an ed25519 key pair using the javascript crypto library, I am now faced with the challenge of saving the private key in openssh format. Despite attempting to use the sshpk library for this task, I encountered an issue where the exported k ...

javascriptexportopenssh

How to remove elements from a JavaScript array: exploring the potential use of the delete function in JavaScript

I'm currently using Flot JS charts and I am attempting to completely remove a specific plot series from my data array either through jquery or plain javascript. Below is an example of what my data array consists of: [ { "label" : "Citrix PV Ether ...

javascriptjqueryflot

Issues with tangents in three.js compared to the VertexTangentsHelper with problems on display

After enabling the "vertexTangentsHelper" feature in THREE.js, I've noticed that the tangents on various geometries appear to be incorrect. I'm questioning whether these tangents are being miscalculated (possibly due to my shader output) or if t ...

javascriptthree.js

Corrupted ZIP file being downloaded by FileSaver

After sending a request from my React front-end to my Node back-end, the expected zip file download results in a CPGZ file instead of decompressing the zip. Any assistance in resolving this issue would be highly appreciated. Thank you! React Code downloa ...

javascriptnode.jsreactjszipfilesaver.js

Using Mongoose with Next.js to implement CRUD operations

I have been successful in implementing POST and GET methods in my Next.js app using mongoose, but I am facing challenges with the delete operation. This is an example of my POST method located in the API folder: export default async function addUser(req, ...

javascriptmongoosenext.js

The request to sign up at http://localhost:3000/api/signup resulted in a 400 (Bad Request

Having recently started working with the MEAN stack, I've run into some issues when trying to send registration data using http.post. Below is my server code: var express = require('express'), bodyParser = require('body-parser' ...

javascriptangularjsjsonnode.jshttp-headers

script loop causing an embedded form

While trying to include a Hubspot embedded form on a page using a script, I encountered an issue. I utilized onMounted to ensure the form is displayed correctly. However, upon leaving and re-entering the component where the form is located, an additional b ...

javascriptvue.js

In JavaScript, promises remain in a pending state

How can I prevent my promises from remaining in the pending state and resolve them instead? var foundPeopleA = findPeopleA().then(function(result) { var res = [] result.map(function(el) { res.push(getProfileXML(el.sid)); ...

javascriptpromisees6-promise

Tips for closing the navbar by clicking elsewhere on the page

Is there a way to modify my code in order for the navbar to close when clicking outside of it, while staying open if something inside it is clicked? $(document).ready(function() { $('.nav-btn').on('click', function() { $('.na ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Having trouble with retrieving data from a JSON file through a service in Angular 4? Getting an "unexpected end of input" error?

I've been attempting to retrieve data from a JSON file stored in the assets folder, but all I keep encountering are errors. heroes.service.ts getPeopleData(): Observable<people[]>{ return this.http.get<people[]>('assets/data/someD ...

javascriptangularobservableangular-services

Jade will be loaded after Angular finishes loading and resolving all variables

I have an uncomplicated page built with nodejs, utilizing angular on the front end and nodejs on the back end. When I load data in a controller using $http like so - angular.module('student').controller('StudentDashBoardController', f ...

javascriptangularjsnode.jsexpress

Webpack has no issues building the files, however, the JavaScript fails to execute during runtime

I recently upgraded from Webpack v4 to v5, following the documentation and addressing any deprecation messages from the CLI. The build was successful, but when testing the application, I noticed that the JavaScript wasn't running and no errors were be ...

javascriptreactjswebpackbuildcompilation

The addClass and removeClass functions seem to be malfunctioning

Hey everyone, this is my first time reaching out for help here. I looked through previous questions but couldn't find anything similar to my issue. I'm currently working on a corporate website using bootstrap3 in Brackets. I've been testing ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Directional Light in three.js that Tracks Alongside the Camera

I'm encountering an issue with Three.js and lighting that follows a camera. I am utilizing orbit control for mouse movement. In release 66, the following code used to function properly: light = new THREE.DirectionalLight( 0xffffff, 1 ); lig ...

javascriptthree.js

Tallying discarded objects post removal from drop zone

Is there a way to accurately count dropped items within a dropped area? I have created an example that seems to be working fine but with one minor issue. When I begin removing items, the count does not include the first item and only starts decreasing afte ...

javascriptjquery

A Multilingual Application developed using either AngularJS or the Ionic Framework

Having recently delved into both AngularJS and the Ionic Framework, my background is primarily in Microsoft technologies. I am currently working on developing an app that supports three languages: English, Arabic, and French. Drawing from my experience wi ...

javascriptc#angularjsionic-framework

Swapping two values of input forms in HTML using jQuery interchangeably

I need help figuring out how to dynamically update the values of two input fields on a form interchangeably. For example, if input one represents the current price of Bitcoins and input two represents USD, I want to be able to change the value of one input ...

javascriptjqueryhtml