Как показывать разные подсказки на диаграммах (в столбцах)?

Как вывести разные подсказки (tooltips) на столбцах диаграммы?

Вот мой код:

var barChart = {
  labels: ["2016", "2017", "2018", "2019", "2020"],
  datasets: [{
      label: '',
      backgroundColor: "rgba(34,42,171, 0.7)",
      borderColor: 'rgba(34,42,171, 1)',
      borderWidth: 1,
      data: [220, 315, 380, 470, 520]
    },
    {
      label: '',
      backgroundColor: "#ceb947",
      data: [135, 190, 180, 160, 240]
    },
  ]
};
var ctx4 = document.getElementById("canvas").getContext("2d");
window.newBar = new Chart(ctx4, {
  type: 'bar',
  data: barChart,
  options: {
    title: {
      display: false,
      fontStyle: 'bold',
      text: "Figure"
    },
    legend: {
      display: false,
      position: "bottom",
      padding: 20,
      labels: {}
    },
    tooltips: {
      mode: 'label',
      bodySpacing: 10,
      cornerRadius: 0,
      titleFontSize: 16,
      bodyFontSize: 14,
      titleMarginBottom: 15,
      callbacks: {
        label: function(tooltipItem, data) {
          var value = data.datasets[0].data[tooltipItem.index];
          value = value.toString();
          value = value.split((/(?=(?:..)?$)/));
          value = value.join(',');
          return 'Total: ' + value + ' %';
        }
      }
    },

    scales: {
      xAxes: [{
        gridLines: false,
        barPercentage: 0.5,
        ticks: {
          fontColor: 'rgb(37,39,103)',
          fontSize: '14',
          autoSkip: false,
          maxRotation: 45,
          minRotation: 45,
          padding: 15
        }
      }],
      yAxes: [{
        ticks: {
          fontColor: 'rgb(37,39,103)',
          fontSize: '14',
          beginAtZero: true,
          stepSize: 100,
          userCallback: function(value, index, values) {
            value = value.toString();
            value = value.split(/(?=(?:..)?$)/);
            value = value.join(',');
            return value + ' %';
          }
        }
      }]
    },
    responsive: true,
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="canvas" width="100%" height="60%"></canvas>

Нужно, чтобы выводились данные из:

data: [220, 315, 380, 470, 520]

и

data: [135, 190, 180, 160, 240]

Сейчас дублируется.


Ответы (0 шт):