Django with chartjs > 2.9.3

I'm using version Django==5.0.6 and attempting in integrate charts using chartjs and plugin datalabels.

When I use the charts render without issue, but I'm not able to see any datalabels.

If I try to add Chart.register(ChartDataLabels); the graph no longer renders. I've also tried Chart.plugins.register(ChartDataLabels);

I'd like to be able to use the most updated version of chartjs but when I change the chart version to anything other than 2.9.3, the graphs don't render.

base.html

<!DOCTYPE html>
<html>
    {% load static %} 
    {% load django_bootstrap5 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}

  <head>
    <title>{{ template_data.title }}</title>

    <link rel=
      "stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    
<link href=
      "https://fonts.googleapis.com/
      css2?family=Poppins:wght@300;400;500;600;700&display=
      swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css"
    href="{% static 'css/style.css' %}">

    <meta name="viewport" content="width=device-width,
      initial-scale=1" />
      
      <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script> 
      <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
  </head>
...

data.html

{% extends "base.html" %}
{% load django_tables2 %}

{% block head %}
  <p><h3>Job data</h3>{{year}}</p>
{% endblock head %}

{% block content %}

<canvas id="chart" style="position: relative; height:100vh; width:100vw"></canvas>

<script>
      
      let ctx = document.getElementById("chart").getContext('2d');
      /* Chart.register(ChartDataLabels); Chart.plugins.register(ChartDataLabels); */
      let chart = new Chart(ctx, {
        type: "horizontalBar",
        
        data: {
           labels: [{% for data in labels %} '{{data}}', {% endfor %}],
           datasets: [
              {
                label: "Job Week 13",
                backgroundColor: "#2d9f42",
                borderColor: "#030202",
                data: [{% for data in week13_count %}{{data}},{% endfor %}],
              },
              {
                label: "Job Day 1",
                backgroundColor: "#fc9003",
                borderColor: "#030202",
                data: [{% for data in job1_count %}{{data}},{% endfor %}],
              },
              {
                  label: "Group",
                  backgroundColor: "#79AEC8",
                  borderColor: "#030202",
                  data: [{% for data in count %}{{data}},{% endfor %}],
              }]            
        },
      
        options: {
          responsive: true,
          title: {
             text: "Job outcome data",
             display: true
          },
          scales: {
             xAxes: [{
               ticks: {
                     beginAtZero:true
                 }
     
             }],
           yAxes: [{ stacked:true}]
           
         },
         plugins: {
          datalabels: {
            align: 'end',
            color: 'red',
        } /* added for simplicity to test */
        }         
     }     
     });    
</script>
{% endblock %}

works with 2.9.3 but can't figure out how to add datalabels

Ideally I'd like to be able to use the most up to date,s table version of chartjs. The graph renders with 2.9.3, but I can't register datalabels.

Back to Top