Как нарисовать проценты на гистограмме с помощью JavaScript

Чтобы показать процент в верхней части каждого столбца, вы можете использовать плагин datalabel со своими диаграммами. Это помогает добавить фактический счетчик по оси Y вверху каждого столбца. Даже вы можете изменить его поведение.

Даю ссылку на пример, откуда вы также сможете лучше понять это.[Ссылка на видео]

Вы можете использовать крючок onComplete для рисования/записи этих значений после полной визуализации анимации диаграммы. А затем используйте ctx.fillText(), чтобы настроить так, как вы предпочитаете.

const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
const yValues = [55, 49, 44, 24, 15];
const barColors = ["red", "green","blue","orange","brown"];
const total = yValues.reduce((acc, val) => acc + val, 0);
new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
options: {
    legend: {display: false},
    title: {
      display: true,
      text: "World Wine Production 2018"
    },
    animation: {
      onComplete: function () {
        const ctx = this.chart.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.fillStyle = "red";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        this.data.datasets.forEach(function (dataset) {
          for (let i = 0; i < dataset.data.length; i++) {
const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            ctx.fillText(dataset.data[i], model.x, model.y - 5);
            ctx.fillText("%", model.x + 15, model.y - 5);
          }
        });
      }
    }
  }
});

ОБНОВЛЯТЬ

Не знаю, правильно ли я вас понимаю. Я предполагаю, что вы хотите добавить новые данные в диаграмму... Если да, то вам необходимо обновить массивы. Сопоставьте данные со значениями столбцов и цветов. Я предполагаю, что именно это вы имеете в виду, когда клиент хочет что-то добавить. А затем обновите массив dataset.

const xValues = ["Italy", "France", "Spain", "USA", "Argentina", "New1", "New2"];
const yValues = [55, 49, 44, 24, 15, 12, 99];
const barColors = ["red", "green","blue","orange","brown", "bronze", "purple"];
const total = yValues.reduce((acc, val) => acc + val, 0);
new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "World Wine Production 2018"
    },
    animation: {
      onComplete: function () {
        const ctx = this.chart.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.fillStyle = "red";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
    this.data.datasets.forEach(function (dataset) {
          for (let i = 0; i < dataset.data.length; i++) {
            const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            ctx.fillText(dataset.data[i], model.x, model.y - 5);
            ctx.fillText("%", model.x + 15, model.y - 5);
          }
        });
      }
    }
  }
});

https://cdpn.io/pen/debug/QWRKMNX?authentication_hash=xnMabpeVanRr