How to change chartjs data text

Question

can you help me make the project I have in the image?

What I need to do is to write the data text in chartjs one under the other with the one in the image.

Below are my codes in codepen: https://codepen.io/korayhan-aslan/pen/RwQvVbV

enter code here

Answer 1

To make that possible, change the value of the "text" in your generateLabels function from a string to an array, and add a tooltip plugin.

Modify your text in generateLabels function

return {
        text: [typerOne,typerTwo], # before typerTwo + ": " + typerOne
        fillStyle: style.backgroundColor,
        strokeStyle: style.borderColor,
        lineWidth: style.borderWidth,
        pointStyle: pointStyle,
        hidden: !chart.getDataVisibility(i),
                  
        // Extra data used for toggling the correct item
        index: i
};

Modify tooltip label

tooltip: {
            callbacks: {
                label: function(context) {
                    return [context.formattedValue, context.label]
                }
            }
        },

// donut chart start
const donutData = {
  labels: [
    'Başarılı İşlem',
    'Bekleyen İşlem',
    'Başarısız İşlem'
  ],
  datasets: [{
    data: [1248, 1182, 1020],
    backgroundColor: [
      '#0FC351',
      '#FD865E',
      '#F75555'
    ],
    borderRadius: 50,
    borderWidth: 0,
    spacing: -20,
    hoverOffset: 4
  }]
};

var donutCtx = document.getElementById('donutChart');
var myDonutChart = new Chart(donutCtx, {

  type: "doughnut",
  data: donutData,
  options: {
    layout: {
      padding: {
        top: 40,

      }
    },
    responsive: true,
    aspectRatio: 2,
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            return [context.formattedValue, context.label]
          }
        }
      },
      legend: {
        position: "right",
        labels: {
          font: {
            size: 12,
            weight: 600
          },
          color: "#2D3748",
          boxWidth: 10,
          boxHeight: 10,
          usePointStyle: true,
          pointStyle: "circle",
          padding: 25,
          generateLabels(chart) {
            const data = chart.data;
            if (data.labels.length && data.datasets.length) {
              const {
                labels: {
                  pointStyle
                }
              } = chart.legend.options;

              return data.labels.map((label, i) => {
                const meta = chart.getDatasetMeta(0);
                const style = meta.controller.getStyle(i);
                let typerOne = `${data['datasets'][0].data[i]} Adem`;
                let typerTwo = `${label}`;
                return {
                  text: [typerOne, typerTwo],
                  fillStyle: style.backgroundColor,
                  strokeStyle: style.borderColor,
                  lineWidth: style.borderWidth,
                  pointStyle: pointStyle,
                  hidden: !chart.getDataVisibility(i),

                  // Extra data used for toggling the correct item
                  index: i
                };
              });
            }
            return [];
          }
        }
      },
      datalabels: {
        display: false
      }
    },
    cutout: "80%",
    radius: "80%",
  }

});
// donut chart end

.donut-chartx {
  position: relative;
  @media (min-width: 1600px) {
    min-height: 262px;
  }
  @media (min-width:1400px) and (max-width:1599px) {
    min-height: 230px;
  }
  @media (min-width:992px) and (max-width:1399px) {
    min-height: 200px;
  }
  background-color: #ffffff;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  border-radius: 16px;
  border: 1px solid #edf2f7;
  .chart-title {
    position: absolute;
    left: 20px;
    top: 20px;
    font-weight: 800;
    @media (min-width: 1600px) {
      font-size:18px;
    }
    @media (min-width:1400px) and (max-width:1599px) {
      font-size: 14px;
    }
    @media (max-width:1399px) {
      font-size: 12px;
    }
  }
  .chart-select {
    position: absolute;
    right: 20px;
    @media (min-width: 1400px) {
      top:20px;
    }
    @media (min-width:1200px) and (max-width:1399px) {
      top: 13px;
    }
    @media (max-width:1199px) {
      top: 12px;
    }
    .selectric {
      background-color: @bglighter!important;
    }
    .selectric .label {
      @media (min-width: 1600px) {
        font-size: 12px;
        height: 36px!important;
        line-height: 36px!important;
      }
      @media (min-width:1200px) and (max-width:1599px) {
        font-size: 12px;
        height: 30px!important;
        line-height: 30px!important;
        padding: 0 56px 0 15px;
      }
      @media (min-width:768px) and (max-width:1199px) {
        font-size: 12px;
        height: 30px!important;
        line-height: 30px!important;
        padding: 0 35px 0 15px;
      }
      @media (max-width:767px) {
        font-size: 10px;
        height: 30px!important;
        line-height: 30px!important;
        padding: 0 56px 0 15px;
      }
      font-weight: 600;
      color:@main-font-color;
    }
    .selectric-items li {
      @media (min-width: 768px) {
        font-size:12px!important;
      }
      @media (max-width:767px) {
        font-size: 10px!important;
      }
    }
  }
}

<div class="donut-chart-content donut-chartx mb-lg-0 mb-3">
  <div class="chart-title">Yatırım İstatistikleri</div>
  <div class="chart-select">
    <div class="select-basic">
      <select name="" id="" class="form-select select-box">
        <option value="">Aylık</option>
        <option value="">Yıllık</option>
        <option value="">Haftalık</option>
      </select>
    </div>
  </div>
  <canvas id="donutChart" width="300" height="300"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>