CODEWITHSUNDEEP
javascriptd3.jschartsc3.js
uglycode
uglycode

Reputation: 3082

Is it possible to dynamically change tooltip on c3 charts?

When you generate a c3 chart, you can define a lot of properties ,among other also a tooltip, as seen here:

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`
    }
  }
};

However, when the chart is generated, we can only load the new data property. I was wondering if it's possible to update the tooltip as well? Here's my case (it's only for illustrative purposes): https://plnkr.co/edit/8PrbjVqhS9BBYpSbZmkM?p=preview

As you can see, when the data is updated, the tooltip is no longer representing the correct values.

Upvotes: 0

Views: 325

Answers (1)

Countingstuff
Countingstuff

Reputation: 783

Try something like this? 

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

function f() {
  let x;
  let y;
  let together;
  return () => {
    x = randomNR(0, 100);
    y = randomNR(0, 100);
    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`
      }
    }
  };
}

const myGen = f();

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

setTimeout(function() {
  // HOW TO UPDATE THE TOOLTIP HERE?
  chart.load(myGen().data);
}, 2500);

Upvotes: 0

Related Questions