Как отобразить значения на круговой или гистограмме в php с помощью chart.js

Question

Я хочу показать значения на графиках. Я ищу много, но не смог найти свое решение. Вот код ниже:

<script>
var ctx = document.getElementById("barChart");
ctx.height = 100;
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {        
      labels: <?php echo json_encode($Division); ?>,        
      datasets: [{
         label:    'Target',
         data: <?php echo json_encode($TARGET_QTY); ?>,
        //backgroundColor: "rgba(255, 159, 64, 0.2)", 
        backgroundColor: "rgb(231, 123, 126)", 
        borderColor: "rgb(219, 219, 219)",
        borderWidth: 1
    },
    {                     
        label: 'Actual',
        data: <?php echo json_encode($DISPATCH_QTY); ?>,
        backgroundColor: "rgb(0, 191, 255)",
        borderColor: "rgb(252, 252, 252)",
        borderWidth: 1
    }
]
},
options: {
responsive: true,
  tooltips: {
        "enabled": false
    },
    scales: {
        yAxes: [{
          gridLines: {
            display:false,
        },
            ticks: {
                beginAtZero:true
            }
        }]
    },
    title: {
        display: true,
        // position:"bottom",
        text: 'Target vs Actual Dispatch'
    },
    hover: {
        // Overrides the global setting
        mode: 'label'
    },
    animation: {
    duration: 1,
    onComplete: function () {
        var chartInstance = this.chart,
            ctx = chartInstance.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function (dataset, i)
        {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function (bar, index) {
                var data = dataset.data[index];
                ctx.fillText(data, bar._model.x, bar._model.y - 5);
            });
        });
    }
  },
    /*legend: {
        display: true,
        // position : "bottom",
        labels: {
            fontColor: 'rgb(0, 0, 0)'
        }
    }*/
}
});
</script>


<div class="row">
  <div class="col-md-12">
      <div class="chart">
                <canvas id="barChart" style="position: relative; height: 300px;"></canvas>
      </div>
  </div>
</div>

Я ищу много, но не могу показать значения в гистограмме. В этом коде значение будет отображаться в верхней части графика, но не может отображаться на панели. Я хочу показать значение на столбцах графика. это либо гистограмма, либо круговая диаграмма. Я использую библиотеку chart.js. Пожалуйста, помогите мне избавиться от этой ситуации. Заранее спасибо.