Loading
/custom-emojis/emojis/contour-map.png
Templates
📚
Articles & Resources
📖
Guides & Support
🎖️
Bounty Program
🌵
CalcTree
You can add Python-generated charts to your page using Matplotlib, a Python library.
Each time the Python source is executed, the chart updates. Try changing the parameters below to see it in action:



Line width
:3.00


Frequency
:2.00


Can’t display the image because of an internal error. Our team is looking at the issue.





How to add a Python-generated chart

Please follow these three steps:

Step one: Add a Python source

First, you should add a Python source to your page. Click on Python on the Integrations sidebar:
Select Python from the Integrations sidebar


If you cannot see the Integrations sidebar, click on the plug icon, then on + Add :
Click on + Add icon to see the Python option


When you click on Python, an example Python source code will be added:
A Python source is added to the page


Step two: Add Matplotlib code

If a Python source code includes a chart created using Matplotlib, it will be extracted and displayed on the integrations sidebar.
The default sample Python code doesn't have Matplotlib charts, so you will need to add one. To do so, you can choose a sample Matplotlib chart from the examples available on the official Matplotlib website, for example:
pick a sample Matplotlib chart from the official website

Replace the Python code in the source editor with the sample you just picked up. After a few moments, the chart will be extracted from the code and shown on the Integrations sidebar:
Matplotlib chart appears on the Integrations sidebar


Step three: Drop the chart on the page

To add the chart to your page, simply drag and drop it to the desired location. See it in action below:
Drag and drop the chart on the page



How to add parameters to the chart

The sample Matplotlib code will create a chart with pre-set values and configurations. If you modify the sample code to use parameters, the chart updates every time those parameters change.

For example, in the chart shown at the top of this page, which is taken from here, we used two parameters in the code - see how it was created below:
Connecting Python chart to page parameters



Recommended styles for Python-generated charts

Matplotlib offers extensive customisation options for lines, axes, colors, fonts, and more. To create Python-generated charts consistent with other CalcTree branding, you can use the following style settings:

Python Charts Style Guide




Still have more questions?

Join the conversation on Slack below!