{"id":13481222,"url":"https://github.com/metricsgraphics/metrics-graphics","last_synced_at":"2025-12-16T16:02:11.888Z","repository":{"id":16598965,"uuid":"19353482","full_name":"metricsgraphics/metrics-graphics","owner":"metricsgraphics","description":"A library optimized for concise and principled data graphics and layouts.","archived":false,"fork":false,"pushed_at":"2022-05-31T15:05:59.000Z","size":8522,"stargazers_count":7441,"open_issues_count":131,"forks_count":471,"subscribers_count":196,"default_branch":"main","last_synced_at":"2025-04-23T17:07:40.281Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://metricsgraphicsjs.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metricsgraphics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2014-05-01T18:25:52.000Z","updated_at":"2025-04-10T10:07:31.000Z","dependencies_parsed_at":"2022-08-07T08:15:29.788Z","dependency_job_id":null,"html_url":"https://github.com/metricsgraphics/metrics-graphics","commit_stats":null,"previous_names":["mozilla/metrics-graphics"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metricsgraphics%2Fmetrics-graphics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metricsgraphics%2Fmetrics-graphics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metricsgraphics%2Fmetrics-graphics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metricsgraphics%2Fmetrics-graphics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metricsgraphics","download_url":"https://codeload.github.com/metricsgraphics/metrics-graphics/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250477813,"owners_count":21437049,"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-07-31T17:00:49.841Z","updated_at":"2025-12-16T16:02:06.543Z","avatar_url":"https://github.com/metricsgraphics.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript","JavaScript","others","Charts","Stale"],"sub_categories":["Uncategorized","JS Libraries \u0026 Utilities"],"readme":"[![MetricsGraphics Logo](.github/logo.svg)](https://metricsgraphicsjs.org)\n\n[![BundlePhobia](https://badgen.net/bundlephobia/minzip/mg2)](https://bundlephobia.com/result?p=mg2) [![CodeClimate](https://api.codeclimate.com/v1/badges/dc22d28ce4d8bece4504/maintainability)](https://codeclimate.com/github/jens-ox/metrics-graphics/maintainability) [![Netlify Status](https://api.netlify.com/api/v1/badges/797ef16b-da9e-461f-851b-e50ddfd905ab/deploy-status)](https://app.netlify.com/sites/affectionate-benz-6e3cf9/deploys)\n\n*MetricsGraphics* is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce common types of graphics in a principled and consistent way. The library currently supports line charts, scatterplots and histograms, as well as features like rug plots.\n\n## Example\n\nAll you need to do is add an entry node to your document:\n\n```html\n\u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n```\n\nThen, use the id to mount the chart:\n\n```js\nimport LineChart from 'metrics-graphics'\n\nnew LineChart({\n  data, // some array of data objects\n  width: 600,\n  height: 200,\n  target: '#chart',\n  area: true,\n  xAccessor: 'date',\n  yAccessor: 'value'\n})\n```\n\nThat's it!\n\n![Sample Screenshot](.img/screenshot.png)\n\nThe raw data for this example can be found [here](packages/examples/src/assets/data/ufoSightings.js)\n\n## Documentation\n\nIf you want to use *MetricsGraphics*, you can find the public API [here](packages/lib/docs/API.md).\n\nIf you want to extend *MetricsGraphics*, you can read up on the [components](packages/lib/docs/Components.md) and [utilities](packages/lib/docs/Utility.md).\n\n## Development Setup\n\nThis project uses [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/). Please make sure that Yarn is installed.\n\n```bash\n# clone and setup\ngit clone https://github.com/metricsgraphics/metrics-graphics\ncd metrics-graphics\nyarn install\n```\n\nRun both the development setup of the library and the development setup of the examples\n\n```bash\n# inside packages/lib\nyarn dev\n\n# inside packages/examples\nyarn dev\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetricsgraphics%2Fmetrics-graphics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetricsgraphics%2Fmetrics-graphics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetricsgraphics%2Fmetrics-graphics/lists"}