Chartjs-Data not displaying in django admin – using chart.js (no errors)

by

1👍

Can’t be sure that this is the cause of your issue without seeing the HTML, but the way you are passing data to your chart JS is unsafe – don’t do this:

const chartData = {{ chart_data | safe }};

It’s very likely you are ending up with invalid JS as a result of this, because the output is not properly escaped. Instead, use the json_script filter to safely render your object, and then read this in JS. Something like this:

{{ chart_data|json_script:"chart-data" }}
<script>
    const chartData = JSON.parse(document.getElementById("chart-data").textContent);
    // initialise the chart as you currently do
</script>

Note – you need to stop encoding the data as JSON in your view – just pass it the original list which this filter will encode safely for you.

If this doesn’t fix it then it’s likely that the data structure itself is not what the chart library is expecting – perhaps if you post a sample of what chartData looks like we can see whether that looks right.

Leave a comment