{"id":19908708,"url":"https://github.com/data-forge-notebook/plot","last_synced_at":"2025-05-03T02:31:19.738Z","repository":{"id":38485964,"uuid":"217180031","full_name":"data-forge-notebook/plot","owner":"data-forge-notebook","description":"The simplest plotting API for JavaScript and TypeScript.","archived":false,"fork":false,"pushed_at":"2023-05-05T07:56:43.000Z","size":4668,"stargazers_count":20,"open_issues_count":68,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-21T10:53:33.998Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/data-forge-notebook.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"ashleydavis"}},"created_at":"2019-10-24T00:47:22.000Z","updated_at":"2024-12-31T13:26:31.000Z","dependencies_parsed_at":"2023-11-26T12:41:34.336Z","dependency_job_id":null,"html_url":"https://github.com/data-forge-notebook/plot","commit_stats":{"total_commits":159,"total_committers":1,"mean_commits":159.0,"dds":0.0,"last_synced_commit":"8bf6766731775342911a1e3e4971398b13edc271"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge-notebook%2Fplot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge-notebook%2Fplot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge-notebook%2Fplot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge-notebook%2Fplot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/data-forge-notebook","download_url":"https://codeload.github.com/data-forge-notebook/plot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252008956,"owners_count":21679670,"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":[],"created_at":"2024-11-12T21:13:03.296Z","updated_at":"2025-05-03T02:31:18.481Z","avatar_url":"https://github.com/data-forge-notebook.png","language":"TypeScript","readme":"# Plot\n\nThe simplest and most forgiving plotting API for JavaScript and TypeScript.\n\nUse plot to quickly and conveniently render charts for your data. It is an abstraction layer over JavaScript visualization libraries. Currently supporting [Apex Charts](https://apexcharts.com/), but intending to support more in the future.\n\n[Click here for the API docs](https://data-forge-notebook.github.io/plot/docs)\n\n[For various examples see this repo](https://github.com/data-forge-notebook/plot-examples).\n\nPlot can be used from Node.js, from the browser and is specially designed to integrate with [Data-Forge Notebook](https://www.data-forge-notebook.com/).\n\n[Click here to support the developer](https://www.codecapers.com.au/about#support-my-work)\n\n## Aims\n\n- To have a simple way to plot a chart.\n- To be an abstraction over multiple code libraries for visualization in JavaScript.\n- To have a plotting library that works well in Node.js, the browser and in [Data-Forge Notebook](https://www.data-forge-notebook.com/).\n- To be able to define charts purely as data using a simple JSON format.\n- To be able to serialize a chart to send it over the wire or save it to disk.\n- To be able to separate chart configuration and chart data to make it easy to reuse the charts you create.\n\n## Usage\n\nSome instructions for using plot. These instructions are for JavaScript, but this library also works in TypeScript.\n\n### Import plot\n\n### Browser\n\n    npm install --save plot @plotex/render-dom\n\n```javascript\nconst { plot } = require(\"plot\");\nrequire(\"@plotex/render-dom\");\n\nconst data = [ /* your data */ ];\nconst parentEl = /* parent DOM to contain the chart */ ;\nconst chart = plot(data).renderDOM(parentEl);\n```\n\n### Node.js\n\n    npm install --save plot @plotex/render-image\n\n```javascript\nconst { plot } = require(\"plot\");\nrequire(\"@plotex/render-image\");\n\nconst data = [ /* your data */ ];\nplot(data).renderImage(\"my-chart.png\");\n```\n\n### Data-Forge Notebook\n\nplot is integrated into [Data-Forge Notebook](https://www.data-forge-notebook.com/).\n\nYou can plot an array of JavaScript data like this:\n\n```javascript\nconst data = [ /* your data */ ];\ndisplay.plot(data);\n```\n\nSee more Data-Forge Notebook examples in [the exported example visualization notebook](https://github.com/data-forge-notebook/wiki/wiki/visualizing-data).\n\n## Pass in configuration options\n\n```javascript\nconst data = [ /* your data */ ];\nconst chartConfig = { chartType: \"bar\" };\nconst axisConfig = { x: \"Date\", y: \"Close\" };\nplot(data, chartConfig, axisConfig)\n    .renderDOM(parentEl);\n```\n\n## Multiple types of data\n\n### Plot an array of numbers\n\n```javascript\nplot([10, 15, 30])\n    .renderDOM(parentEl);\n```\n\n### Plot an array of JavaScirpt object\n\n```javascript\nplot([ { A: 10, B: 52 }, { A: 15, B: 37 }, A: 30, B: 45 }])\n    .renderDOM(parentEl);\n```\n\n### Plot by column\n\n```javascript\nplot({ A: [10, 15, 30], B: [52, 37, 45] })\n    .renderDOM(parentEl);\n```\n\n## Resources\n\n- [API docs](https://data-forge-notebook.github.io/plot/docs/)\n- [For TypeScript Node.js example see this repo](https://github.com/data-forge-notebook/plot-examples).\n\n## Future\n\nThere's more work to be done!\n\nCan you contribute, test or give feedback?\n\nEmail the developer on ashley@codecapers.com.au.\n\n## Support the developer \n\n\u003ca target=\"_blank\" href=\"https://www.codecapers.com.au/about#support-my-work\"\u003eClick here to **support the developer.**\u003c/a\u003e\n\n## Development stuff\n\n### Rebuilding the docs\n\n```bash\nnpm run docs\n```\n","funding_links":["https://github.com/sponsors/ashleydavis"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdata-forge-notebook%2Fplot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdata-forge-notebook%2Fplot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdata-forge-notebook%2Fplot/lists"}