Chartjs datalabels not showing anything with django template

by

-1👍

✅

Actually my code was perfectly fine, I appreciate the effort of the guy who kept posting the same answer that did not help, I finally figured out that the issue is in my chartjs version , so if you are facing the same issue with chartjs 3.0.0-alpha , 3.2.1 seemed to fix it for me.

👍:0

How about instead of reposting and deleting you post each time so people dont know whats wrong you actually keep your post so people can actually help you because with what you provide its working fine, chart shows, with register the plugin shows so unless you point out where its going bad and people can see it you wont get any better answers

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1">
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>

<canvas id="turn_over_line" class="cann"></canvas>

<script>
  // Turn over line chart
  $(document).ready(function() {
    Chart.register(ChartDataLabels);
    var ctx = document.getElementById('turn_over_line');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [0, 1, 2, 3, 2, 3, 0.5, 8, 4, 2],
        datasets: [{
          backgroundColor: '#ccddee',
          borderColor: '#5566aa',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
        }]
      },
      options: {
        legend: false,
        tooltip: false,
        plugins: {
          datalabels: {
            align: function(context) {
              var index = context.dataIndex;
              var value = context.dataset.data[index];
              var invert = Math.abs(value) <= 1;
              return value < 1 ? 'end' : 'start'
            },
            anchor: 'end',
            backgroundColor: null,
            borderColor: null,
            borderRadius: 4,
            borderWidth: 1,
            color: '#223388',
            font: {
              size: 11,
              weight: 600
            },
            offset: 4,
            padding: 0,
            formatter: function(value) {
              return Math.round(value * 10) / 10
            }
          }
        }
      }


    });
  })
</script>

Leave a comment