can not export variable from admin.py to overriden template in django

good night, i have overriden a template in django (change_list.html) to show chart.js charts in django admin page following the tutorial in this tutorial,bute when i get to the part when have to replace the hard coded data with the variable chart_data from teh admin.py file and pas it to the overriden template change_list.html,nothing happens and the table shows with all values in 1. what could be happening, i have not found any information about how variables are passed from admin.py to the overriden template html files. Here is the code

class ReporteActividadUsuariosAdmin(admin.ModelAdmin):
list_display = ['nombre','apellidos','carnet','cliente','cantidad_de_prestamos']    
ordering = ['-cantidad_de_prestamos']


def changelist_view(self, request, extra_context=None):
    chart_data = (
                   ReporteActividadUsuarios.objects.annotate(Count("cantidad_de_prestamos"))
                  .values("nombre","apellidos")
                  .annotate(y=Count("cantidad_de_prestamos"))
                  #.group_by("cantidad_de_prestamos")
                  #.order_by("-carnet")
                 )

    # Serialize and attach the chart data to the template context
    as_json = json.dumps(list(chart_data), cls=DjangoJSONEncoder)
    extra_context = extra_context or {"chart_data": as_json}
    # Call the superclass changelist_view to render the page
    return super().changelist_view(request, extra_context=extra_context)

def has_add_permission(self, request):
    return False

and the overriden template file change_list.html is as follows:

    {% extends "admin/change_list.html" %}
{% load static %}
{% block content %}

{% block extrahead %}
{{ block.super }}

<link rel="stylesheet" href="{% static '/asset/css/Chart.min.css' %}" />
<script src="{% static '/asset/js/admin/Chart.bundle.min.js' %}"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const ctx = document.getElementById('myChart').getContext('2d');

  const chartData = {{ chart_data | safe }};
  //const chartData = [1,7,12,8,2] ;
   // Render the chart
  var myPieChart = new Chart(ctx, {
    type: 'bar',
    data: {
       datasets: [{
         data: chartData,
         borderColor: '#00443436' ,
         backgroundColor: ['#df0000','lightgreen','orange','lightblue','lightyellow'],

    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'MARIA DEL CARMEN   MUZIO ZARRANZ',
        '   LAY MI  RODRIGUEZ GUILBEAUX',
        'REINALDO LAZARO    LASTRE LABRADA',
        'SISSI CARIDAD  RODRIGUEZ PERAZA',
        'AUSTIN LLERANDI PEREZ'
     ]
    },
    options: {

      //animation: { animateRotate: true,} ,


      }
   });

}) ;
</script>
{% endblock %}

<h3> Usuarios Mas Activos </h3>
<div style="width: 23%;">
<canvas style="margin-bottom: 0px; width: 65%; height: 60%;"
id="myChart"></canvas>
</div>

<!-- Render the rest of the ChangeList view by calling block.super -->
{{ block.super }}
{% endblock %}

thanks very much in advance,