Chartjs-Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage

by

2👍

✅

You can make use of the tooltip label callback like so:

function Test() {
  const data2 = [20, 10, 8, 10, 30, 3, 1, 12, 5, 2, 1, 2];

  //method 2

  const names = [
    "Burn/ Charity",
    "for sale",
    "Liquidity",
    "Team",
    "Locked",
    "Released/mo",
    "charity",
    "Marketing/Sales",
    "Tax on Sales",
    "Charity",
    "Liquidity",
    "to Tokes Holder",
  ];

  let total = data2.reduce(
    (accumulator, currentValue) => accumulator + currentValue
  );
  console.log(total);

  let labelss = data2.map(
    (value, index) => Math.round((value / total) * 100) + "%"
  );
  const data4 = data2.map((item, index) => {
    return names[index] + " " + labelss[index];
  });

  const data = {
    labels: data4,
    datasets: [{
      data: data2,

      backgroundColor: [
        "red",
        "yellow",
        "blue",
        "black",
        "orange",
        "grey",
        "green",
        "salmon",
        "grey",
        "lightgreen",
        "pink",
        "yellow",
      ],
    }, ],
  };

  const ctx = document.getElementById('chartJSContainer').getContext('2d');
  new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            label: (ttItem) => (ttItem.label)
          }
        }
      }
    }
  });
}

Test();
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

If I remember correctly for the react package you will need to provide the options in a prop variable like you do for the data so you would get something like this:

const opts = {
    plugins: {
        tooltip: {
          callbacks: {
            label: (ttItem) => (ttItem.label)
        }
      }
    }
  };

return <Pie data={data} options={opts}/>;

Leave a comment