The power of Chart.js in Jupyter !

Overview


The power of Chart.js in Jupyter Notebooks

GitHub GitHub release (latest by date) Binder Awesome Chart.js

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

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

License

Ipychart is available under the MIT license.

You might also like...

🍞📊 Beautiful chart for data visualization.

🍞📊  Beautiful chart for data visualization.

🍞 📈 Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. 📦 Packages The functionality of TOAST U

Jan 2, 2023

:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

Jan 1, 2023

:bar_chart: A library of modular chart components built on D3

Plottable Plottable is a library of chart components for creating flexible, custom charts for websites. It is built on top of D3.js and provides highe

Dec 31, 2022

Chart image and QR code web API

Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Dec 25, 2022

📈 A small, fast chart for time series, lines, areas, ohlc & bars

📈 A small, fast chart for time series, lines, areas, ohlc & bars

📈 μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Jan 7, 2023

TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

Mar 3, 2021

🍞📊 Beautiful chart for data visualization.

🍞📊  Beautiful chart for data visualization.

🍞 📈 Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. 📦 Packages The functionality of TOAST U

Jan 6, 2023

Chart.js bindings for OCaml

chartjs-ocaml: OCaml bindings for Chart.js This library provides OCaml bindings for the Chart.js charting library and some popular plugins. Following

Aug 20, 2022

Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Dec 16, 2022
Comments
  • Running the formatter with a function?

    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.

    opened by timmyjl12 3
  • Animation with ipywidget

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

    opened by ColasDroin 3
  • Running on jupyter-lab

    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

    opened by Psidium 2
  • Chartjs graphs are not respecting the width and height of the container.

    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?

    opened by ndgayan 2
Releases(v0.4.0)
  • v0.4.0(Mar 17, 2022)

    New features in this version:

    • Chart.js backend was updated to 3.x.x. This is a major update, all changes can be seen here: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html. This implies large performance improvements, easier customization, a rewritten animation system, bug fixes etc.
    • Doc: Move from GitLab pages to GitHub pages. Replace algolia search by flexsearch. Re-writing of some sections to match the new syntax of Chart.js 3.x.x. Better handling of components, which are now isolated in separates HTML files called by Vue scripts.
    • Convert all JS code to ES6 Javascript standard. Use ESLint and Prettier to clean the JS codebase.
    • Integration and adaptation of the colorscheme plugin into the codebase because original implementation is not compatible with Chart.js 3.x.x.
    • Start TDD on Python side.
    Source code(tar.gz)
    Source code(zip)
  • v0.3.3(Jan 21, 2022)

  • v0.3.2(Dec 18, 2021)

    New features in this version:

    • Pandas Interface : Complete refactoring of the API. Charts are now created using functions.
    • Added support of Jupyter Lab.
    • Added dynamic update of charts when an agument of the chart is modified. This bring a lots of possibilities to dynamically modify a chart, for example by using ipywidgets (sliders, buttons ...).
    Source code(tar.gz)
    Source code(zip)
  • v0.2.2(Nov 7, 2020)

    New features in this version:

    • Full cleaning of Python code
    • Reduce fontsize in tooltips (back to default size) for charts made using the Pandas Interface
    Source code(tar.gz)
    Source code(zip)
  • v0.2.1(Sep 15, 2020)

    New features in this version:

    • Add zoom feature (using https://github.com/chartjs/chartjs-plugin-zoom), allowing the user to zoom in the chart using his mouse. Double click on the chart will reset the zoom.

    Bug Fixes:

    • Fix tooltips for doughnut, pie, polarArea charts when using pandas interface (tooltips wasn't formatted in the same way as other charts).
    • Fix typing in methods of ChartDataFrame class in pandas interface.
    • Fix docstrings: removing excess arguments and adding missing arguments.
    • Various fixes and minor modifications in the documentation
    Source code(tar.gz)
    Source code(zip)
  • v0.1.4(Sep 4, 2020)

    New features in this version:

    • Pandas Interface : Tooltips are automatically generated to use the column names of the dataframe used to draw the chart. Therefore, the information displayed when hovering the Chart is more relevant and more complete!
    • Code optimization in both Chart & ChartDataFrame classes

    Bug Fixes:

    • Add missing requirements
    • Requirements & LICENSE are now packaged in the source distribution
    Source code(tar.gz)
    Source code(zip)
  • v0.1.3(Aug 2, 2020)

    New features in this version:

    • Pandas Interface : add aggregator in the y scale label for clarity purpose.

    Bug Fixes:

    • ChartDataFrame can now handle dataset_options as list (for 2 datasets when hue is activated) or as dict (for 1 dataset when hue is deactivated)
    Source code(tar.gz)
    Source code(zip)
  • v0.1.2(Jul 24, 2020)

    New features in this version:

    • Pandas Interface : draw charts from your pandas dataframe. More details in documentation.
    • Better handling of callback functions in Javascript side. Using loops & Lodash Javascript package instead of listing all possible callbacks.

    Bug Fixes:

    • Dalalabels automatic coloring didn't work when a colorscheme was selected.
    • Default point colors and border colors didn't work on mixed type charts.
    • Callback functions didn't work on axes options.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.1(Jun 18, 2020)

    Second version of ipychart. Some new features are available:

    • Datalabels (using https://github.com/chartjs/chartjs-plugin-datalabels)
    • Colorschemes (using https://github.com/nagix/chartjs-plugin-colorschemes)
    • New default style
    • Export chart to html

    ... And several bug fixes.

    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Apr 29, 2020)

Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions.

chartjs-plugin-regression Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions using

Wilfredo Pomier 14 Dec 18, 2022
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Dash Dash is the most downloaded, trusted Python framework for building ML & data science web apps. Built on top of Plotly.js, React and Flask, Dash t

Plotly 17.9k Jan 4, 2023
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
A repostory of samples, which demonstrates, how to use the 'Power Tools' extension for Visual Studio Code.

vscode-powertools-samples A repository of samples, which demonstrates, how to use the Power Tools extension for Visual Studio Code. Apps data-url-conv

e.GO Mobile 7 Feb 3, 2022
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023
:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

C3.js 9.2k Jan 2, 2023
GPL version of Javascript Gantt Chart

dhtmlxGantt Getting started | Features | Follow us | License | Useful links dhtmlxGantt is an open source JavaScript Gantt chart that helps you illust

null 952 Dec 29, 2022