I am creating a dashboard, on this dashboard i make a call to some charts using htmx, but the chart is not rendering properly, when i inspect the element i can see the script, canvas and code but not the visual of the graph. I am using flask and python and this is my code pre the dashboard that calls the chart:
<div>
<div class="toolbox">
<h1>Budget</h1>
<div>
<div hx-get="/auth/budget/expense_form" hx-swap="innerHTML" hx-trigger="load once" id="expense_form_field">
</div>
<div hx-get="/auth/budget/dashboard" hx-swap="outerHTML" id="dashboard" hx-target="#dashboard"
hx-trigger="load once">
</div>
</div>
</div> </div> </div>
And this is what html is returned:
<div>
<canvas id="myChart"></canvas>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});</script>
I have looked to the following similar questions, but i have not found any of their fixes useful: enter link description here, enter link description here,enter link description here
When i check the console errors i am noticing this:
Uncaught ReferenceError: Chart is not defined
at <anonymous>:4:19
at At ([email protected]:1:22924)
at Nt ([email protected]:1:23051)
at [email protected]:1:10309
at [email protected]:1:44741
at oe ([email protected]:1:4604)
at s ([email protected]:1:44716)
my thinking is that HTMX is affecting the script? Also when i inspect the chart element in browser it has an htmx class tag, could this be interfering with the script?
<script class="htmx-settling">
const ctx = document.getElementById('myChart');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});</script>