Create charts with Python in a very similar way to creating charts using Chart.js

Hey guys,

Firstly, thank you for this! What a great implementation. I really appreciate your efforts.

So I inherited a code base that I'm trying to streamline data while using JavaScript and Python. I'm running into an issue where I can't seem to get the formatter to work on data labels. I'll post the working JS version below and what I've tried to do in Jupyter/Python.

setChartPercentages() { for (const set of this.chart.data.datasets) set.datalabels = { labels: { value: { formatter: function(value, ctx) { //ctx not needed, but including it as that's typically what the chart.js docs do. return value + '%' } } } } } This function is called when creating or updating charts. I simplified it a bit, but basically it shows total percent instead of the numbers.

I tried to replicate this in ipychart. I've tried to use the callback function as stated in the documentation as well as just using the formatter. I even tried to combine them. All of them did not register the formatter.

dataset = { 'labels': ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7', 'Data 8'], 'datasets': [{'data': [14, 22, 36, 48, 60, 90, 28, 12], "datalabels": {"display": True, "labels": { "value": { 'formatter': { 'callback': '''function(value, ctx) {return '$' + value.toString()}''' } } } } }] }

I also tried

'''function(value, index, values) {return '$' + value}'''

Any idea on how to get the formatter to register? Thank you a ton for any help.

Thanks for this amazing library, I'm surprised it's not already super hyped as the plots are looking great, and at the moment there are zero good equivalents for Jupyter notebooks.

It is stated in the doc that a plot could be animated with ipywidget. I tried, but there seems to be no equivalent to the Figure attribute of bqplot, or FigureWidget of plotly, which would be used in e.g. a widgets.VBox object. Here is what I currently have, which doesn't work:

# Modules import
from ipychart import Chart
import ipywidgets as widgets
import time
import numpy as np

# Define data and chart
data = {'datasets': [{'data': [{'x': 0, 'y': 0}, {'x': 1, 'y': 1}]}]}
mychart = Chart(data, 'line')

# Define a button for animation
btn = widgets.Button(description="Start", icon="play")

# Callback to update the chart
def update_chart(btn):
    for i in range(10):
        y = np.random.rand(2)
        with mychart.hold_sync():
            mychart.data = {'datasets': [{'data': [{'x': 0, 'y': y[0]}, {'x': 1, 'y': y[1]}]}]}
        time.sleep(0.1)
        
btn.on_click(update_chart)

# UI Combining Button & Chart
widgets.VBox([btn, mychart])

I believe I should provide something like mychart.fig instead of mychart to widgets.VBox, but I couldn't find any similar attribute in the Chart class. Any idea how to solve that? If yes, that would be a great addendum to the documentation. Thank you :)

Hi,

Nice project you've got here, just what I wanted.

Could you add a warning in the "Installing" docs saying that this only works with jupyter-notebook and not with jupyter-labs?

I don't know if it was a problem only for me, but I couldn't make it work on Jupyter-lab, I kept getting errors when the front-end tried to depend on jupyter.extensions.jupyterWidgetRegistry. Unfortunately I'm not that used with this whole notebook thing and lost a couple hours trying to make it work. 😅

BR, Gabriel

It seems ChartJS might be trying to maintain the aspect ratio in the Voila dashboard web app. I need to turn that option off by setting the "maintainAspectRatio: false" option. Could you add this to the IPYCharts package to correctly render the charts in Voila?