Can the tooltip on c3 charts be modified dynamically?

Creating a c3 chart involves defining various properties, including a tooltip. Here is an example:

generateData = () => {
  const x = randomNR(0, 100);
  const y = randomNR(0, 100);
  const together = x + y;

  return {
    data: {
      columns: [
        ['data1', x],
        ['data2', y],
      ],
      type: 'donut',
    },
    tooltip: {
      format: {
        value: function() {
          return `${x} + ${y} = ${together}`
        }
      }
    },
    donut: {
      title: `Tooltip not getting updated`
    }
  }
};

After generating the chart, only the new data property can be loaded. Is it possible to update the tooltip as well? For example: https://plnkr.co/edit/8PrbjVqhS9BBYpSbZmkM?p=preview

In the provided case, updating the data results in incorrect values being displayed in the tooltip.

javascriptd3.jschartsc3.js

Answer №1

Consider trying out this alternate approach:

function generateRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function createChartUpdater() {
  let xValue;
  let yValue;
  let totalValue;
  return () => {
    xValue = generateRandomNumber(0, 100);
    yValue = generateRandomNumber(0, 100);
    totalValue = xValue + yValue;
    return {
      data: {
        columns: [
          ['data1', xValue],
          ['data2', yValue],
        ],
        type: 'donut',
      },
      tooltip: {
        format: {
          value: function() {
            return `${xValue} + ${yValue} = ${totalValue}`
          }
        }
      },
      donut: {
        title: `Tooltip update issue`
      }
    }
  };
}

const chartUpdater = createChartUpdater();

const newChart = c3.generate({
  bindto: '#chart',
  ...chartUpdater()
});

setTimeout(function() {
  // HOW TO CHANGE THE TOOLTIP HERE?
  newChart.load(chartUpdater().data);
}, 2500);

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

Google Maps Circle Radius Functionality Malfunctioning

I've been trying to implement a map scaling feature using a slider in my code but I'm having trouble getting it to work. While the map is displaying correctly, the radius won't update as intended. Any assistance with this would be greatly ap ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Regular expression for extracting all JavaScript class names and storing them in an array

In my quest to create a straightforward regex, I aim to spot all class names within a file. The catch is that it should identify them even if there's no space preceding the curly bracket. For example: class newClass {...} This should result in ...

javascriptnode.jsregex

Determine the total amount of pages generated from the Twitter search API

Can the Twitter search API provide a count of the pages returned? I'm curious if there is a method to determine how many pages are available for a particular query. ...

javascriptjqueryjsonapitwitter

Unable to change the NodeJS version

Nodejs installation not updating Nodejs version $ nodejs --version v8.10.0 $ sudo npm install -g nodejs@latest + <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8c6c7cccdc2dbe89886988698">[email protected]</a> up ...

javascriptnode.jsnpm

How can we calculate mesh positions and create a new Point3D object with specified coordinates (x, y,

private void BuildVertices(double x, double y, double len) { if (len > 0.002) { mesh.Positions.Add(new Point3D(x, y + len, -len)); mesh.Positions.Add(new Point3D(x - len, y - len, -len)); mesh.Positions.Add(new Point3D(x + len, y - len, -l ...

javascriptc#three.js

VueJS throws an error when trying to access the 'settings' property of an undefined object

I'm encountering an issue with my basic input in a Vue component. The input should update data on change, but instead I'm getting the error message Uncaught TypeError: Cannot read property 'settings' of undefined Vue component <templ ...

javascriptvue.js

Determine the sequence of a div based on its class

Here is the code snippet I am working with: <div class="test"></div> <div class="test"></div> <div class="test"></div> <input type="button" class="button" value="get number"> <div class="test"></div> & ...

javascriptjqueryhtml

I'm currently attempting to launch my Discord bot, but I keep encountering an error message even though I have discord.js properly installed

Error code: 'MODULE_NOT_FOUND', requireStack: [ C:\Users\Me\Desktop\Discord Server\bot.js' ] ...

javascriptnode.js

What is the best way to implement an automatic logout feature in PHP?

I develop websites with login/logout functionality. Whenever a link or button is clicked on the website, I use an ajax function to verify the user's login status and automatically log them out if their session has expired. The logout function also up ...

javascriptphpjqueryajax

Iterate through the classes for updates rather than focusing on individual id fields

I am currently working on creating a function that can refresh data with an AJAX call for multiple instances of a class within a single page. The function functions perfectly when there is only one instance on the page: $(document).ready(function() { ...

javascriptjqueryajax

Troubleshooting issue with displaying favicons in express.js

Currently, I am working on a simple express.js example and trying to get favicons to display properly. Everything functions correctly when testing locally, but once uploaded to my production server, only the default favicon appears. I have attempted cleari ...

javascriptnode.jsexpressfaviconiisnode

When attempting to extract values from selected items in Nextjs, clicking to handle them resulted in no action

I am facing an issue with my Nextjs project. I am trying to gather values from select items and combine them into a single object that needs to be processed by an API. However, when I click the select button, nothing happens. How can I resolve this issue? ...

javascriptreactjsmongodbnext.js

alerting the user of any modifications made to a table within the database

In my current Spring project, I am seeking the optimal solution to improve system performance. Should I implement a solution using Javascript or create a custom method in Java? ...

javascriptjqueryspringhibernate

Show or hide the right element when clicked using ng-show in AngularJS

My goal is to toggle elements based on which one is clicked, not all at once. For instance, if I have 3 form elements and 3 buttons, when I click on button 1, I only want to toggle the corresponding form element. Here is my current code snippet: In Angu ...

javascriptjqueryhtmlangularjs

Using the spread operator to modify an array containing objects

I am facing a challenge with updating specific properties of an object within an array. I have an array of objects and I need to update only certain properties of a single object in that array. Here is the code snippet I tried: setRequiredFields(prevRequir ...

javascriptreactjstypescript

Adding a listener to an element within a loop

I'm currently exploring a way to add an event listener in my script. Here's the variable I have: var inputs = data.context.find(':input').not(':button'); Following that, I have a FOR loop where I utilize this variable to ap ...

javascriptdom-events

What is the most effective method for achieving a desired outcome?

Is it a valid approach to get an action result, and if so, how can this be achieved? For instance, if there is a page with a form for creating entities, after successfully creating an entity, the user should be redirected to the entity's detail view. ...

javascripttypescriptdesign-patternsreduxflux

JS Data error: The attributes provided must include the property indicated by idAttribute - particularly with regards to hasMany relationships

Encountered Error: The main key for my user model is username. The primary key for my routes is the routename. When my API returns JSONs, they are nested inside data:{} following jsonapi.org specifications. However, this structure differs from what js-dat ...

javascriptangularjsjsdatajs-data-angular

How do I transfer a PDF received from a third-party to my client using a REST API on the backend?

After receiving a PDF from a third party, I stored the file on S3. Upon checking the file on S3, I was able to view the PDF without any issues. However, when sending the PDF to the client and verifying it using Postman, an empty PDF is displayed. Below is ...

javascripttypescriptrestexpress

Ways to constrain checkbox choices to only one within an HTML file as the checklist with the checkboxes is being created by JavaScript

I am working on developing an HTML dialogue box to serve as a settings page for my program. Within this settings page, users can create a list of salespeople that can be later selected from a drop-down menu. My current objective is to incorporate a checkbo ...

javascriptjqueryhtml