Using PyScript with chart.js

Technical Topics PyScript
1

I want to use PyScript with chart.js
You see nothing on screen. No error messages.
Any suggestions?

Thanks

Best regards Hebi

    <canvas id="lineChart" width="800" height="600"></canvas>

<py-script>

from js import document, Chart
from pyodide.ffi import to_js
import asyncio

canvas = document.getElementById(‘lineChart’)

ctx = canvas.getContext(‘2d’)

ctx.fillStyle = ‘green’
ctx.fillRect(10, 10, 150, 100)

chart = Chart.new(ctx, to_js({
“type”: “line”,
“data”: {
“labels”: [
“Monday”,
“Tuesday”,
“Wednesday”,
“Thursday”,
“Friday”,
“Saturday”,
“Sunday”,
],
“datasets”: [
{
“label”: “work load”,
“data”: [2, 9, 3, 17, 6, 3, 7],
“backgroundColor”: “rgba(153,205,1,0.6)”,
},
{
“label”: “free hours”,
“data”: [2, 2, 5, 5, 2, 1, 10],
“backgroundColor”: “rgba(155,153,10,0.6)”,
},
],
},
“options”: {
“responsive”: False,
“maintainAspectRatio”: False
}
}))

    </py-script>
</body>
2

You need to add an explicit conversion function to your call to to_js to instruct it to convert your Python dictionary to a JS object, like so:

from js import Object
chart = Chart.new(ctx, to_js({...}, dict_converter=Object.fromEntiries))
1 Like
3

Great. It works.

Thanks @JeffGlass

Best regards Hebi