How can I show the label on the point of the line.

[pakorn33]

How can I show the label on the point of the line. I am using a bar chart and it works properly, but the line is not correct.
I wondered for a time what part of the code was wrong.

The code and picture show below.

Thank you.

<script src="plugins/chart.js/Chart.min.js"></script>
<script type="module" src="plugins/chart.js/chartjs-plugin-datalabels.min.js"></script>

$('#barChart').remove(); // this is my <canvas> element
$('#barChart_main').append('<canvas id="barChart" style="min-height: 600px; height: 600px; max-height: 600px; max-width: 100%; display: block; width: 644px;" width="515" height="200" class="chartjs-render-monitor"></canvas>');

var barChartCanvas = $('#barChart').get(0).getContext('2d');
var barChartData = jQuery.extend(true, {}, productionMain);
var barChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  datasetFill: false,
  tooltips: {
    titleFontSize: 22,
    bodyFontSize: 20
  },
  scales: {
    xAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'เวลา'
        , fontSize: 20
      }, ticks: { fontSize: 20, fontColor: '#000', fontStyle: '500' }
    }],
    yAxes: [{
      scaleLabel: {
        display: true
        , fontSize: 20
      }, ticks: { fontSize: 20, fontColor: '#000', fontStyle: '500' }
    }]
  },
  title: {
    display: true,
    fontSize: 22
  },
  legend: {
    display: true,
    labels: {
      fontSize: 16,
      padding: 16
    }
  },
  plugins: {
    datalabels: {
      anchor: 'end',
      align: 'end',
      rotation: -45
    }
  }
}

var barmain1 = new Chart(barChartCanvas, {
  plugins: ChartDataLabels,
  type: graphtype,
  data: barChartData,
  options: barChartOptions
})

barmain1.data.datasets[bb].data.push(result3.list[k]);
barmain1.options.title.text = sum;
barmain1.options.titleFontSize = '30';
barmain1.update();

Chart.plugins.unregister(ChartDataLabels);
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.defaultFontColor = 'black';
Chart.defaults.global.defaultFontFamily = "Arial";

Chart.Legend.prototype.afterFit = function () {
  this.height = this.height + 40;
};

[simonbrunel]

var barmain1 = new Chart(barChartCanvas, {
  plugins: ChartDataLabels,
  //...

This should be:

var barmain1 = new Chart(barChartCanvas, {
  plugins: [ChartDataLabels], //< array of plugins
  //...

My guess is that when you create your first chart (graphtype === 'bar' apparently), Chart.plugins.unregister hasn't been called yet, so the datalabels plugin is still registered. But then, when graphtype === 'line', the plugin is unregistered and since you misused the plugins chart config, no label are displayed. You should also move everything from Chart.plugins.unregister before creating a new chart (and it should be called only one time).

[pakorn33]

Thank you very much