nicohlr/ipychart

The power of Chart.js with Python

The power of Chart.js with Python

Installation

You can install ipychart from your terminal using pip or conda:

# using pip
$ pip install ipychart

# using conda
$ conda install -c conda-forge ipychart

Documentation

• Introduction
• Getting Started
• Usage
• Charts
• Configuration
• Scales
• Pandas Interface
• Advanced Features
• Developers

Usage

Create charts with Python in a very similar way to creating charts using Chart.js. The charts created are fully configurable, interactive and modular and are displayed directly in the output of the the cells of your jupyter notebook environment:

You can also create charts directly from a pandas dataframe. See the Pandas Interface section of the documentation for more details.

Development Installation

For a development installation:

$ git clone https://github.com/nicohlr/ipychart.git
$ cd ipychart
$ conda install jupyterlab nodejs -c conda-forge
$ cd ipychart/js
$ npm install yarn
$ npm install 
$ cd .. 
$ pip install -e .
$ jupyter nbextension install --py --symlink --sys-prefix ipychart
$ jupyter nbextension enable --py --sys-prefix ipychart

References

• Chart.js
• Ipywidgets
• Ipywidgets cookiecutter template
• Chart.js Datalabels
• Chart.js Colorschemes
• Vuepress
• GitHub Pages

License

Ipychart is available under the MIT license.

ipychart's Issues

Chartjs graphs are not respecting the width and height of the container.

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?

Animation with ipywidget

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 :)

Jupyter Labs or Notebook Function Error

ipychart throws a JS error, here is my setup and error:

• Versions:

Python 3.9.6
jupyterlab               3.6.3
ipychart                 0.4.0
jupyter                  1.0.0
jupyterlab               3.6.3
notebook                 6.5.4
pip                      23.1

• basic packages installed (separately tested)

pip install jupyterlab
pip install jupyter
pip install ipychart

jupyter notebook
jupyter-lab

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]}]
}

mychart = Chart(data=dataset, kind='bar')
mychart

• Error:

[Open Browser Console for more detailed log - Double click to close this message]
Model class 'ChartModel' from module 'ipychart' is loaded but can not be instantiated
TypeError: o._deserialize_state is not a function
    at u._make_model (http://localhost:8888/nbextensions/jupyter-js-widgets/extension.js?v=20230421165510:2:752635)

• Jupyter Lab or Jupyter Notebook active extensions:

!jupyter nbextension list

Known nbextensions:
  config dir: /Users/jhernandez/Documents/Workspace/Lab/Parquet/venv/etc/jupyter/nbconfig
    notebook section
      ipychart/extension  enabled 
      - Validating: OK
      jupyter-js-widgets/extension  enabled 
      - Validating: OK

Not sure if this is a compatibility issue.

Any interest in supporting polars instead of just pandas?

I think in the plots.py functions there'd need to be a check if data is either pandas or polars and then _create_chart_data_agg would be for pandas and there'd be a _create_chart_data_agg_pl function that would do the same thing except from polars.

This is just an example, of course there are a bunch of other functions to contend with.

Doesn't render in VSC

When I try to render a graph in VSC I see the Chart data, options, type, etc, up to Chart created in the developer console but then I get ipywidgetsKernel.js:2 Error: Failed to render widget ead80bfb5bb34800a691c9806717554f, TypeError: Cannot read properties of undefined (reading 'parent')

The full errors are:

	i	@	ipywidgetsKernel.js:2
	d	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	o	@	ipywidgetsKernel.js:2
	Promise.then (async)
	d	@	ipywidgetsKernel.js:2
	a	@	ipywidgetsKernel.js:2
	Promise.then (async)
	d	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	n	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	Promise.then (async)
	(anonymous)	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsKernel.js:2
	n	@	ipywidgetsKernel.js:2
	fe	@	ipywidgetsKernel.js:2
	(anonymous)	@	ipywidgetsRenderer.js:2
	(anonymous)	@	ipywidgetsRenderer.js:2
	(anonymous)	@	ipywidgetsRenderer.js:2
	s	@	ipywidgetsRenderer.js:2
	Promise.then (async)
	c	@	ipywidgetsRenderer.js:2
	s	@	ipywidgetsRenderer.js:2
	Promise.then (async)
	c	@	ipywidgetsRenderer.js:2
	(anonymous)	@	ipywidgetsRenderer.js:2
	t	@	ipywidgetsRenderer.js:2
	renderOutputItem	@	ipywidgetsRenderer.js:2
	renderOutputItem	@	notebookWebviewPreloads.js:3
	await in renderOutputItem (async)
	h	@	notebookWebviewPreloads.js:3
	render	@	notebookWebviewPreloads.js:3
	render	@	notebookWebviewPreloads.js:3
	renderOutputElement	@	notebookWebviewPreloads.js:3
	renderOutputCell	@	notebookWebviewPreloads.js:3
	await in renderOutputCell (async)
	(anonymous)	@	notebookWebviewPreloads.js:3
	c.set.queue	@	notebookWebviewPreloads.js:3
	enqueue	@	notebookWebviewPreloads.js:3
	(anonymous)	@	notebookWebviewPreloads.js:3
	postMessage (async)
	(anonymous)	@	index.html?id=9e26cb…tebookRenderer:1168
	HostMessaging.channel.port1.onmessage	@	index.html?id=9e26cb…otebookRenderer:308

Uncaught (in promise) SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at VM171 embed-amd.js:208:86852 at VM171 embed-amd.js:208:86877

	(anonymous)	@	VM171 embed-amd.js:208
	(anonymous)	@	VM171 embed-amd.js:208
	Promise.then (async)
	h	@	VM171 embed-amd.js:208
	(anonymous)	@	embed-amd.js:210
	execCb	@	preload.js:1700
	check	@	preload.js:883
	enable	@	preload.js:1176
	init	@	preload.js:788
	(anonymous)	@	preload.js:1460
	setTimeout (async)
	req.nextTick	@	preload.js:1819
	localRequire	@	preload.js:1449
	requirejs	@	preload.js:1801
	(anonymous)	@	embed-amd.js:210
	n	@	embed-amd.js:210
	(anonymous)	@	embed-amd.js:210
	(anonymous)	@	embed-amd.js:210

If I do HTML(mychart.get_html_template()) then I get my graph so it's a reasonable work around. I don't really know much about how ipywidgets and all that stuff works in the background so not sure if there's an obvious fix here.

Running the formatter with a function?

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.

Running on jupyter-lab

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