### Templates
Use the pre-configured templates for common visualizations, and optionally override any default styling of the class.
```python
from notecharts import Line
Line(
x=["Mon", "Tue", "Wed", "Thu", "Fri"],
y={
"Product A": [120, 200, 150, 220, 280],
"Product B": [180, 160, 200, 240, 290],
"Product C": [160, 120, 140, 190, 250]
},
title="Weekly Sales",
palette="Spectral",
theme="dark",
width="650px",
font="Elms Sans",
options= {
"legend": {"itemGap": 25} # Override class defaults
}
).display()
```
#### With DataFrames
All pre-built charts support direct DataFrame integration:
```python
import pandas as pd
import random
from notecharts import Radar
random.seed()
df = pd.DataFrame({
"Category": ["Primary", "Secondary", "Tertiary", "Quaternary"],
"Equipment": [random.randint(4000, 6000) for _ in range(4)],
"Materials": [random.randint(10000, 16000) for _ in range(4)],
"Food & Beverage": [random.randint(10000, 30000) for _ in range(4)],
"Apparel": [random.randint(10000, 40000) for _ in range(4)],
"Tourism": [random.randint(10000, 50000) for _ in range(4)],
"Technology": [random.randint(5000, 15000) for _ in range(4)],
})
Radar(
data=df,
series_col="Category",
title="Radar",
theme="dark",
palette={
"palette": "agSunset",
"value": "+0.5" # Offset-based modifications to palette
},
width="600px",
font="Poppins",
).display()
```
### Full Control
Complete control over every aspect of the chart, through a beautiful, declarative API. If you can find an example on the [ECharts Gallery](https://echarts.apache.org/examples/en/index.html), you can run it in `notecharts`.
```python
from notecharts import Chart, JSCode, Palette, Option
options: Option = {
"title": {"text": "Bar Chart"},
"textStyle": {"fontFamily": "Josefin Sans"}, # Automatically loaded from Google Fonts
"xAxis": {"type": "category"},
"yAxis": {
"axisLabel": {
"formatter": JSCode("function(v) { return '$' + v.toLocaleString(); }")
}
},
"tooltip": {
"trigger": "axis"
},
"legend": {},
"dataset": {
"source": [
["Product", "Sales", "Expenses", "Profit"],
["Mon", 120, 80, 40],
["Tue", 150, 100, 50],
["Wed", 200, 120, 80],
["Thurs", 180, 110, 70],
["Fri", 220, 140, 80],
]
},
"series": [
{"name": "Sales", "type": "bar"},
{"name": "Expenses", "type": "bar"},
{"name": "Profit", "type": "bar"}
],
"color": Palette("Bamako", 3) # Load n colors from any palette,
# or create your own palette through interpolation,
# like Palette(["#003566", "#ffc300"], 5)
}
Chart(options, width="700px").display()
```
## Notes
- **Name:** Pronounced ***note-charts*** or ***not-echarts***.
- **Security:** Use of `JSCode` allows for arbitrary JavaScript execution in the browser/notebook context. Always ensure you are passing trusted code and data to your charts.
- **Connectivity:** This library is lightweight because it fetches the ECharts, ECharts-GL and fflate (for data decompression) minified code from `cdn.jsdelivr.net` at runtime, so an active internet connection is required to render charts for the first time. These are then cached in the browser/IDE context and subsequent renders can work offline.
## License & Attribution
- **notecharts** is licensed under the [MIT License](LICENSE).
- **Apache ECharts**: This library is a wrapper for [Apache ECharts](https://echarts.apache.org/en/index.html) which is licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0).
- Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.
- Part of the [](https://github.com/matiassingers/awesome-readme) project.
## Links
- [Official Docs](https://echarts.apache.org/en/option.html)
- [ECharts Official Gallery](https://echarts.apache.org/examples/en/index.html)
- [Community Gallery (CN)](https://www.isqqw.com/)