How can I personalize the tooltip in Scatter 3D using Apache Echarts?

I am currently working on an Angular14 project that incorporates the Scatter3D plot functionality from the Apache Echarts library. However, I am facing challenges in customizing the tooltip information.

https://i.sstatic.net/0sDuI.png

Below is the code snippet relating to this feature:

const options = {
  grid3D: {},
  tooltip: {},
  xAxis3D: {
    name: 'Total(USD)',
    nameTextStyle: {
      fontSize: 10
    },
    type: 'value',
    axisLabel: {
      formatter: (value: any) => '$' + shortenNumber(value),
      fontSize: 10
    }
  },
  yAxis3D: {
    name: 'Payout',
    nameTextStyle: {
      fontSize: 10
    },
    type: EchartsAxisType.Value,
    axisLabel: {
      formatter: (value: any) => '$' + shortenNumber(value),
      fontSize: 10
    }
  },
  zAxis3D: {
    name: 'Ratio(%)',
    nameTextStyle: {
      fontSize: 10
    },
    type: EchartsAxisType.Value,
    axisLabel: {
      formatter: (value: any) => formatPercent(value / 100, 'en-US', '1.2-2'),
      fontSize: 10
    }
  },
  series: [
    {
      name: 'Analytics',
      type: 'scatter3d',
      symbolSize: 2,
      data: plotdata,
      dimensions: ['Total', 'Payout', 'Ratio']
    }
  ]
};

The shortenNumber function is used to convert long numbers into abbreviated formats.

javascriptangulartypescriptchartsecharts

Answer №1

After conducting thorough research, I managed to discover a resolution. By utilizing the series/tooltip/formatter, it is possible to customize the information displayed in the tooltip.

const options = {
  grid3D: {},
  tooltip: {},
  xAxis3D: {
    name: 'Total(USD)',
    nameTextStyle: {
      fontSize: 10
    },
    type: 'value',
    axisLabel: {
      formatter: (value: any) => '$' + shortenNumber(value),
      fontSize: 10
    }
  },
  yAxis3D: {
    name: 'Payout',
    nameTextStyle: {
      fontSize: 10
    },
    type: EchartsAxisType.Value,
    axisLabel: {
      formatter: (value: any) => '$' + shortenNumber(value),
      fontSize: 10
    }
  },
  zAxis3D: {
    name: 'Ratio(%)',
    nameTextStyle: {
      fontSize: 10
    },
    type: EchartsAxisType.Value,
    axisLabel: {
      formatter: (value: any) => formatPercent(value / 100, 'en-US', '1.2-2'),
      fontSize: 10
    }
  },
  series: [
    {
      name: 'Analytics',
      type: 'scatter3d',
      symbolSize: 2,
      data: plotdata,
      dimensions: ['Total', 'Payout', 'Ratio'],
      tooltip: {
        formatter: (param: any) => {
          return [
            'Total: $' + shortenNumber(param.data[0]) + '<br/>',
            'Payout: $' + shortenNumber(param.data[1]) + '<br/>',
            'Ratio: ' + param.data[2] + '%<br/>'
          ].join('');
        }
      }
    }
  ]
};

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

The controller leaps into action at the first opportunity, even before the factory has a chance

Can someone help me implement the solution provided in this answer to my scenario? I am attempting to cache data using SQLite with the Cordova SQLite plugin. However, I'm facing an issue where my controller executes before my factory completes its ex ...

javascriptangularjssqliteasynchronousangularjs-service

Generating variable names dynamically in JavaScript

To prevent a javascript heap issue, I implement the usage of multiple arrays including 'family1', 'family2','family3' and 'dogs1', 'dogs2', 'dogs3'. For instance, you can use 'family1 and dog ...

javascriptarraysvariablesnaming

What is the best method for managing heavy loads of AJAX content: Unloading and reloading JavaScript, or

I have a webpage with multiple tabs, let's focus on two: Products and Services. Instead of loading all the tab content at once, I decided to load each tab's specific content only when the tab is clicked. This helps in improving the initial page ...

javascriptajaxjquery

Having trouble getting JavaScript validation to function properly

I'm struggling to make validation work properly when hitting the submit button. No alert messages appear, even though I should be receiving alerts for empty fields. Can someone identify what is wrong with my code? I have tried checking the validation ...

javascripthtmlcssvalidation

Retrieving registered components dynamically in Vue.js

Check out my scenario on jsBin In my setup, I have a selector <component :is="selectedComponent"></component>, along with a <select v-model="currentComponent">...</select> that allows me to choose which one is displayed. Currently ...

javascriptvue.js

Guide to forming a JavaScript array from nested JSON data

Looking to parse through an array of objects related to London weather data from the OpenWeatherMap API. How can I create three distinct arrays in JavaScript, each with variable names "dtArray", "tempMinArray", and "tempMaxArray", containing only values f ...

javascriptarraysjson

Email the jQuery variable to a recipient

I'm facing an issue with sending a jQuery variable containing HTML and form values via email using a separate PHP file with the @mail function. My attempt involves using the jQuery $.ajax function on form submit to send this variable, but unfortunate ...

javascriptphpjqueryajaxemail

Error: Undefined Property in Angular 2 ViewChild Declaration

Exploring a simple example where the childMethod is called within the child component from the parent component using the @ViewChild() decorator. However, encountering an issue where the ViewChild variable remains undefined. Sample Child Component Code: ...

angularjsangulartypescriptviewchild

ways to extract data from a variable using Jquery

Let's say I have a variable named X. X="<table>...</table>" What is the best way to extract data from X using jQuery? For instance: X="<table> <thead> <tr> <td>id</td> <td>name</td> <td>m ...

javascriptjquery

JavaScript does not allow executing methods on imported arrays and maps

In my coding project, I created a map named queue in FILE 1. This map was fully built up with values and keys within FILE 1, and then exported to FILE 2 using module.exports.queue = (queue). Here is the code from FILE 1: let queue = new.Map() let key = &q ...

javascriptnode.jsdiscorddiscord.js

Is it feasible to style individual letters in a word within an input field?

Is it possible to change the styling of individual letters in an input containing text? For example, if the word 'Test' is in the input, can I make the 'Te' bold while leaving the 'st' regular? Alternatively, perhaps I'd ...

javascriptjquery

Is there a way to display my current connected clients to a new client using socket.io?

I am currently working on a project involving socket.io. Upon connecting to a new socket, my input username is displayed in the "usersDiv" where all clients are supposed to be listed. However, I've noticed that when I open another tab and input my nam ...

javascriptnode.jsexpresswebsocketsocket.io

Position a dynamically generated cell in the middle of the window

I am currently developing an employee directory that allows users to search for a specific employee and view their information in a tree or org-chart layout. To achieve this, I have implemented the Google Org Chart code for generating the chart. Each emplo ...

javascripthtmlcssasp.netvb.net

Utilizing async/await as a module function: A comprehensive guide

Express Route: const express=require('express'); const router=express.Router(); const trackRepo=require('../model/track'); router.post('/live',function(req,res){ const time=1439832167; const list=trackRepo.getAlerts ...

javascriptnode.jsexpressasynchronousbabeljs

Guide on incorporating a refresh button to automatically update information from a database in MaterialUI's Datagrid

Recently diving into JavaScript, I encountered a common issue: The data for my table is sourced from a MySQL database through Axios Whenever CRUD operations are performed in the web app, the database is updated accordingly Although backend changes ...

javascriptreactjsmaterial-ui

The hyperlink functionality in NextJS is not functioning properly on Vercel during production

I recently deployed my NextJS site to Vercel. While I can navigate between pages locally, like to "/workshop", nothing happens when I click the Workshop button in production. The Workshop button is located in the Navbar.js file. <Link href="/workshop"&g ...

javascriptreactjsnext.js

instructions on transferring the data to the state without altering it

My data is stored in an array within a file named 'external-data.js' like this: `` export const mydata = [ { name: "john", age: 20, man: true }, { name: "julia", age: 22, man: false } ]; `` In ...

javascriptreactjs

Incorporating the Vidyard embedded player within an Angular application

The Vidyard Portal provides an embed code that looks like this: <!-- The script tag should be placed in the head of your page if possible --> <script src="https://play.vidyard.com/embed/v4.js" type="text/javascript" async>&l ...

angularvideoembed

NodeJS not recognizing global variable causing it to return undefined

Can a global variable be defined in a node.js function? I wish to use the variable "ko" (declared in the getNumbers function) in other functions function getNumbers(callback) { result = cio.query("SELECT numbers FROM rooms WHERE durum='1'", ...

javascriptnode.js

What is the JavaScript mouseenter/out event all about?

My goal is to create a hover effect using JavaScript. I am utilizing the mouseenter and mouseout events to display the content when the mouse hovers over a button and remove the content when the mouse moves out. However, I am facing an issue where the cont ...

javascripthtmlcssjsonajax