This package contains Chart.js bindings for Lona
$ pip install lona-chartjs
lona_chartjs.html.Chart
defines a thin wrapper around the Javascript API of
Chart.js. You can take any demo off
chartjs.org <https://www.chartjs.org/docs/3.5.0/>
and pass the chart config
into Chart.data
.
All data you passed in is available in Chart.data
and can be reset and
altered. To redraw the chart with altered data run self.show(chart)
from
your view.
from lona.html import HTML, H1, H2
from lona import App, View
from lona_chartjs.html import Chart
app = App(__file__)
BAR_CHART_DATA = {
# Taken from https://www.chartjs.org/docs/latest/getting-started/usage.html
'type': 'bar',
'data': {
'labels': ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
'datasets': [{
'label': '# of Votes',
'data': [12, 19, 3, 5, 2, 3],
'backgroundColor': [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
'borderColor': [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
'borderWidth': 1
}]
},
'options': {
'responsive': False,
'scales': {
'y': {
'beginAtZero': True,
}
}
}
}
@app.route('/')
class MyLonaView(View):
def handle_request(self, request):
html = HTML(
H1('Hello World'),
H2('Bar Chart'),
Chart(
width='500px',
height='300px',
data=BAR_CHART_DATA,
),
)
return html
app.run()