score: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.
Source: stackoverflow.com
Related Query
- Data not displaying in django admin - using chart.js (no errors)
- Chart not displaying from JSON data
- ChartJS not displaying time data using Moment.js
- Doughnut Chart not displaying data with Chart Js and Backbone js
- How to create a Doughnut chart in django admin interface using foreign key field data?
- Data not displaying properly in Chart.js line chart
- Bar Chart not displaying when using chart.js
- Why is the data from my API not displaying on my chart.js chart in React?
- Data not displaying in Chart JS from PHP JSON
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Chart.js returns a console error and does not display the chart when using variables as data input
- Data not fully displaying on bar chart
- Background color does not work when trying to create my data before using scatter chart with chart.js
- ChartJS: Chart not displaying full range of data
- Chart.js not displaying Django Rest API data
- Displaying JSON data into a pie chart using chart.js
- Chart js pie chart not showing dynamic data using JSON
- Chart.js: bar chart first bar and last bar not displaying in full
- Chart.js line chart is not displaying
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- Want to draw data using chartjs in django
- ChartJs Not displaying data
- Chart.js Radar Not Displaying Data Values
- Using data from API with Chart JS
- Angular: chart.js chart is not displaying
- Chart JS not showing On hover with small data
- ChartJS "half donut" chart not displaying properly
- Using chart js version 3, how to add custom data to external tooltip?
- Stacked line chart not displaying correctly when Xaxis is time
- Add data to line chart using chart.js
More Query from same tag
- How we can draw a circle in bar chart
- Cannot get react-chartjs options to take effect
- Display data labels on a pie chart in angular-chart.js
- Chart in Ionic Framework doesn't show up
- ChartJS - tooltip of one element is covering point that user should be able to select
- charts labels and data with php arrays
- i have an error when use chart on laravel
- Getting chart.js to work with Django and Apache
- ChartJS Y-Axis scale value wrong
- Adjust legend element alignment for chart.js
- Unable to get Line Chart tooltip on ChartJS
- Hiding spaces with zero values in bar chart with chart.js
- Iterating through the same dataset in Chart.js
- How to create a gradient fill line chart in latest Chart JS version (3.3.2)?
- Add data to line chart using chart.js
- How to edit my custom tooltips in my line chart using chart.js?
- Two different x-axes using charts.js and react
- jQuery - destroy and rebuild chart with original options
- Angular Chart JS prevent x label causing overflow
- Chartjs initial animation want to change from left to right (default it is bottom to top)
- ChartJS Custom text on certain xAxis and yAxis linesS
- ChartJs events in Angular
- How to add Canvas tag inside repeater
- Show chart.js animation only when user scroll on the specific DIV
- How we can set our own colors for each label in charts
- Passing an Array from a Flask view to the javascript code of another view
- Chart.JS - Set fixed X and Y axis values in time chart?
- ChartJS align bars to left instead of center
- Drawing a mixed stacked horizontal bar/line in chartjs
- Adjusting the font size and family of extra fillText labels in ChartJS