{"id":13432937,"url":"https://github.com/mathix420/notion-charts","last_synced_at":"2025-10-03T22:30:40.193Z","repository":{"id":41053765,"uuid":"248977688","full_name":"mathix420/notion-charts","owner":"mathix420","description":"Create stunning charts for your notion.so databases","archived":true,"fork":false,"pushed_at":"2023-01-29T21:52:59.000Z","size":278,"stargazers_count":212,"open_issues_count":8,"forks_count":33,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-02-17T10:34:40.446Z","etag":null,"topics":["business-dashboard","charts","interactive-charts","notion","notion-charts","python-3","vercel"],"latest_commit_sha":null,"homepage":"https://charts.mathix.ninja","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mathix420.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-21T13:05:52.000Z","updated_at":"2024-02-14T12:49:19.000Z","dependencies_parsed_at":"2023-02-16T01:20:21.512Z","dependency_job_id":null,"html_url":"https://github.com/mathix420/notion-charts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathix420%2Fnotion-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathix420%2Fnotion-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathix420%2Fnotion-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathix420%2Fnotion-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathix420","download_url":"https://codeload.github.com/mathix420/notion-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235198406,"owners_count":18951500,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["business-dashboard","charts","interactive-charts","notion","notion-charts","python-3","vercel"],"created_at":"2024-07-31T02:01:18.763Z","updated_at":"2025-10-03T22:30:39.820Z","avatar_url":"https://github.com/mathix420.png","language":"HTML","funding_links":[],"categories":["HTML","HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"# Notion Charts\n\n![image](docs/example.png)\n\n\u003e Notion Charts is a simple tool to create beautiful charts for [Notion.so](https://notion.so/).\n\n\u003cdetails\u003e\n  \u003csummary\u003eSee more examples\u003c/summary\u003e\n\n  ### Business Dashboard\n  ![Business Dashboard](https://i.redd.it/9i9pkp1wbvp41.png)\n\n  ### Dev Dashboard\n  ![Dev Dashboard](docs/example2.png)\n  \n\u003c/details\u003e\n\n\u003e **Note**\n\u003e \n\u003e This project is using a deprecated Unofficial Notion API.\n\u003e Official API version is in development on the [V2 branch](https://github.com/mathix420/notion-charts/tree/v2).\n\n# Usage\n\n## For public Notion pages\n\nSimply use https://charts.mathix.ninja url, and follow the documentation below.\n\n## For private Notion pages\n\nYou'll need to host your own version of this repository.\nThe best way to do that is by clicking this button below, it will automatically host this API on [vercel.com](https://vercel.com/) which is **100% free**.\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow me the steps\u003c/summary\u003e\n\n  1. Click the blue **Deploy** button on this page\n  2. Log in or sign up to continue.\n  3. Choose a name for your project, keep in mind that this name will goes in your url `https://YOUR-PROJECT-NAME.vercel.app`\n  4. Follow instructions and don't forget to put your notion `TOKEN_V2` before clicking **Continue** [If you don't know how to get it, click here](/docs/notion-token.md)\n  5. Click **Continue** one more time, and you're done!\n  6. Leave me a **Star** on github 😋\n\n\u003c/details\u003e\n\nThen when the hosting is completed simply follow documentation instructions below and enjoy 😎 \nDon't forget to use your URL instead of `charts.mathix.ninja`.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fmathix420%2Fnotion-charts.git\u0026env=TOKEN_V2\u0026envDescription=Notion%20session%20cookie\u0026envLink=https%3A%2F%2Fgithub.com%2Fmathix420%2Fnotion-charts%2Fblob%2Fmaster%2Fdocs%2Fnotion-token.md)\n\nIf you want to stay up to date I recommend you to use a [Deploy Hook](https://vercel.com/docs/v2/more/deploy-hooks).\n\n\n# Principles\n\n\u003e There is only 2 principles to understand in Notion Charts.\n\n## 1. The aggregator\n\n\u003e The first \"column\" you set-up on Notion Charts is called the aggregator.\n\nIt's used to group your database by it's values.\n\nFor example if you have a database which contains peoples (`name`, `age`, `height`, `weight`).\n\nBy setting your aggregator to the `age` column all these people will be grouped by their ages. So if the second Notion Chart \"column\" is the `height` with the `avg` action, you will plot the average height by ages of your dataset.\n\n## 2. Actions\n\n\u003e Actions are performed on column datas, in order to obtain specific results.\n\nRight now there is 4 actions possible:\n\n- `value` =\u003e Simply return the value of the cell.\n- `count` =\u003e Will count how many items are in the aggregated set.\n- `sum` =\u003e Return sum of all values in the aggregated set. (only works with numbers)\n- `avg` =\u003e Return average of all values in the aggregated set. (only works with numbers)\n\n# Examples\n\n## Todo-list pie chart\n\n\u003e **Notion Database:** [Notion Task List](https://www.notion.so/mathix/efe5f941ce5e415da072615ee12b4a77?v=9e890bfd058a4d07af5b6024ec0a6e0a)\n\u003e \n\u003e **Columns:** `Status:value | Status:count`\n\u003e \n\u003e **Chart URL:** https://charts.mathix.ninja/schema-chart/efe5f941ce5e415da072615ee12b4a77/9e890bfd058a4d07af5b6024ec0a6e0a?s=Status%3A3E6J%3Avalue%2CCount%3A3E6J%3Acount\u0026t=PieChart\n\n\u003cdetails\u003e\n  \u003csummary\u003eImage preview\u003c/summary\u003e\n\n  ![Pie chart](https://charts.mathix.ninja/image-chart/efe5f941ce5e415da072615ee12b4a77/9e890bfd058a4d07af5b6024ec0a6e0a?s=Status%3A3E6J%3Avalue%2CCount%3A3E6J%3Acount\u0026t=PieChart)\n\n\u003c/details\u003e\n\n## Type repartition of non-evolving Pokémons\n\n\u003e **Notion Database:** [Non-evolving Pokémon](https://www.notion.so/d27bb47228d541a7a979bed894fb7533?v=9667c7a342fb43d88686776c52a6262e)\n\u003e \n\u003e **Columns:** `Primary Type:value | Primary Type:count`\n\u003e \n\u003e **Chart URL:** https://charts.mathix.ninja/schema-chart/d27bb47228d541a7a979bed894fb7533/9667c7a342fb43d88686776c52a6262e?s=Type%3A%29P%7CF%3Avalue%2CCount%3A%29P%7CF%3Acount\u0026t=PieChart\n\n\u003cdetails\u003e\n  \u003csummary\u003eImage preview\u003c/summary\u003e\n\n  ![Pie chart of non-evolving Pokémons](https://i.imgur.com/hzQs3rJ.png)\n\n\u003c/details\u003e\n\n## Specs by type of non-evolving Pokémons\n\n\u003e **Notion Database:** [Non-evolving Pokémon](https://www.notion.so/d27bb47228d541a7a979bed894fb7533?v=9667c7a342fb43d88686776c52a6262e)\n\u003e\n\u003e **Columns:** `Primary Type:value | HP:avg | Attack:avg | Defense:avg`\n\u003e\n\u003e **Chart URL:** https://charts.mathix.ninja/schema-chart/d27bb47228d541a7a979bed894fb7533/9667c7a342fb43d88686776c52a6262e?s=Type%3A%29P%7CF%3Avalue%2CHP%3AHkft%3Aavg%2CAttack%3AB%2F%29Q%3Aavg%2CDefense%3Aq%2B%2BI%3Aavg\u0026t=LineChart\n\n\u003cdetails\u003e\n  \u003csummary\u003eImage preview\u003c/summary\u003e\n\n  ![Line chart of non-evolving Pokémons](https://i.imgur.com/dfwzCPf.png)\n\n\u003c/details\u003e\n\n## Pokedex normal types candle-stick chart\n\n\u003e **Notion Database:** [Normal Type Pokédex](https://www.notion.so/9201f4ac42814afdbcdbee910c919e3f?v=2eb8d4fb18184bfb8cc7cd7b8c5ef002)\n\u003e\n\u003e **Columns:** `Name:value | HP:value | Attack:value | Defense:value | Speed:value`\n\u003e\n\u003e **Chart URL:** https://charts.mathix.ninja/schema-chart/2b5e6a6389e64f3298ab97005f4e6a35/9ef790d411504c70b437361169034b42?s=Name%3Atitle%3Avalue%2CPoints%3AHkft%3Avalue%2C%3AB%2F%29Q%3Avalue%2C%3Aq%2B%2BI%3Avalue%2C%3A8CLR%3Avalue\u0026t=CandlestickChart\n\n\u003cdetails\u003e\n  \u003csummary\u003eImage preview\u003c/summary\u003e\n\n  ![Candle-stick chart Pokémon](https://i.imgur.com/BaNfhQ9.png)\n\n\u003c/details\u003e\n\n# API Documentation\n\n\u003e This part of the documentation is for power users. (API only)\n\nFor fast and easy previews you can now [go directly here](https://charts.mathix.ninja).\n\n\n## Split notion url\n\n```html\nhttps://www.notion.so/fa9b093633c0479f886fdb857f57f9b0?v=c94a0043c3df410cb461e7698cee6aff\n\n\u003ccollection\u003e = fa9b093633c0479f886fdb857f57f9b0\n\n\u003cview\u003e = c94a0043c3df410cb461e7698cee6aff\n```\n\n## Image charts\n\n\u003e Generate a chart image based on [Chart.js](https://www.chartjs.org/), uses [QuickChart.io](https://quickchart.io/).\n\n[`GET`] =\u003e `/image-chart/\u003ccollection\u003e/\u003cview\u003e?s=SCHEMA\u0026t=CHART_TYPE`\n\n### Query parameters\n\n[REQUIRED] `t` =\u003e `line | bar | radar | doughnut | pie | polarArea | bubble | scatter`\n\n[REQUIRED] `s` =\u003e [[`ColumnName:ColumnIndex:action`], ...]\n\n- `ColumnName` =\u003e Display name of the selected Notion column.\n- `ColumnIndex` =\u003e Notion Index of the selected column.\n- `action` =\u003e Action to perform on the column data. (See [Actions](#2-actions))\n\n\n## Interactives charts\n\n\u003e Generate an html page containing a chart based on [Google Charts](https://developers.google.com/chart).\n\n[`GET`] =\u003e `/schema-chart/\u003ccollection\u003e/\u003cview\u003e?s=SCHEMA\u0026t=CHART_TYPE\u0026dark`\n\n### Query parameters\n\n[REQUIRED] `t` =\u003e `line | bar | radar | doughnut | pie | polarArea | bubble | scatter`\n\n[REQUIRED] `s` =\u003e [[`ColumnName:ColumnIndex:action`], ...]\n\n- `ColumnName` =\u003e Display name of the selected Notion column.\n- `ColumnIndex` =\u003e Notion Index of the selected column.\n- `action` =\u003e Action to perform on the column data. (See [Actions](#2-actions))\n\n[OPTIONAL] `dark` =\u003e If set in url, a Notion dark theme is applied.\n\n# Open for contributions\n\nPlease feel free to contribute to this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathix420%2Fnotion-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathix420%2Fnotion-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathix420%2Fnotion-charts/lists"}