{"id":13517865,"url":"https://github.com/ankane/react-chartkick","last_synced_at":"2025-11-17T14:07:05.760Z","repository":{"id":46740419,"uuid":"66233976","full_name":"ankane/react-chartkick","owner":"ankane","description":"Create beautiful JavaScript charts with one line of React","archived":false,"fork":false,"pushed_at":"2025-06-22T18:58:06.000Z","size":108,"stargazers_count":1199,"open_issues_count":0,"forks_count":46,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-11-11T21:28:03.879Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://chartkick.com/react","language":"JavaScript","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/ankane.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-22T02:41:54.000Z","updated_at":"2025-10-23T11:29:40.000Z","dependencies_parsed_at":"2024-06-02T04:44:50.495Z","dependency_job_id":"598f350f-119f-4ff6-a1fd-71b3cc96049f","html_url":"https://github.com/ankane/react-chartkick","commit_stats":{"total_commits":160,"total_committers":7,"mean_commits":"22.857142857142858","dds":0.4375,"last_synced_commit":"4498da6f8219695388b80227a9ece2883922afff"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/ankane/react-chartkick","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Freact-chartkick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Freact-chartkick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Freact-chartkick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Freact-chartkick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankane","download_url":"https://codeload.github.com/ankane/react-chartkick/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Freact-chartkick/sbom","scorecard":{"id":197160,"data":{"date":"2025-08-11","repo":{"name":"github.com/ankane/react-chartkick","commit":"acb33e5a6196f4468cb9181be6ed6cb8b266ea09"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"1 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:7: update your workflow using https://app.stepsecurity.io/secureworkflow/ankane/react-chartkick/build.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/ankane/react-chartkick/build.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/build.yml:10","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Code-Review","score":0,"reason":"Found 1/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/build.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.txt:0","Info: FSF or OSI recognized license: MIT License: LICENSE.txt:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 1 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-16T22:01:20.571Z","repository_id":46740419,"created_at":"2025-08-16T22:01:20.571Z","updated_at":"2025-08-16T22:01:20.571Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284893582,"owners_count":27080534,"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","status":"online","status_checked_at":"2025-11-17T02:00:06.431Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-08-01T05:01:38.207Z","updated_at":"2025-11-17T14:07:05.741Z","avatar_url":"https://github.com/ankane.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Chartkick\n\nCreate beautiful JavaScript charts with one line of React\n\n[See it in action](https://www.chartkick.com/react)\n\nSupports [Chart.js](https://www.chartjs.org/), [Google Charts](https://developers.google.com/chart/), and [Highcharts](https://www.highcharts.com/)\n\n[![Build Status](https://github.com/ankane/react-chartkick/actions/workflows/build.yml/badge.svg)](https://github.com/ankane/react-chartkick/actions)\n\n## Quick Start\n\nRun\n\n```sh\nnpm install react-chartkick chart.js\n```\n\nAnd add\n\n```javascript\nimport { LineChart, PieChart } from 'react-chartkick'\nimport 'chartkick/chart.js'\n```\n\nThis sets up Chartkick with Chart.js. For other charting libraries, see [detailed instructions](#installation).\n\n## Charts\n\nLine chart\n\n```jsx\n\u003cLineChart data={{\"2025-01-01\": 11, \"2025-01-02\": 6}} /\u003e\n```\n\nPie chart\n\n```jsx\n\u003cPieChart data={[[\"Blueberry\", 44], [\"Strawberry\", 23]]} /\u003e\n```\n\nColumn chart\n\n```jsx\n\u003cColumnChart data={[[\"Sun\", 32], [\"Mon\", 46], [\"Tue\", 28]]} /\u003e\n```\n\nBar chart\n\n```jsx\n\u003cBarChart data={[[\"Work\", 32], [\"Play\", 1492]]} /\u003e\n```\n\nArea chart\n\n```jsx\n\u003cAreaChart data={{\"2025-01-01\": 11, \"2025-01-02\": 6}} /\u003e\n```\n\nScatter chart\n\n```jsx\n\u003cScatterChart data={[[174.0, 80.0], [176.5, 82.3]]} xtitle=\"Size\" ytitle=\"Population\" /\u003e\n```\n\nGeo chart - *Google Charts*\n\n```jsx\n\u003cGeoChart data={[[\"United States\", 44], [\"Germany\", 23], [\"Brazil\", 22]]} /\u003e\n```\n\nTimeline - *Google Charts*\n\n```jsx\n\u003cTimeline data={[[\"Washington\", \"1789-04-29\", \"1797-03-03\"], [\"Adams\", \"1797-03-03\", \"1801-03-03\"]]} /\u003e\n```\n\nMultiple series\n\n```javascript\ndata = [\n  {name: \"Workout\", data: {\"2025-01-01\": 3, \"2025-01-02\": 4}},\n  {name: \"Call parents\", data: {\"2025-01-01\": 5, \"2025-01-02\": 3}}\n];\n```\n\nand\n\n```jsx\n\u003cLineChart data={data} /\u003e\n```\n\n## Data\n\nData can be an array, object, callback, or URL.\n\n#### Array\n\n```jsx\n\u003cLineChart data={[[\"2025-01-01\", 2], [\"2025-01-02\", 3]]} /\u003e\n```\n\n#### Object\n\n```jsx\n\u003cLineChart data={{\"2025-01-01\": 2, \"2025-01-02\": 3}} /\u003e\n```\n\n#### Callback\n\n```javascript\nfunction fetchData(success, fail) {\n  success({\"2025-01-01\": 2, \"2025-01-02\": 3})\n  // or fail(\"Data not available\")\n}\n```\n\nand\n\n```jsx\n\u003cLineChart data={fetchData} /\u003e\n```\n\n#### URL\n\nMake your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.\n\n```jsx\n\u003cLineChart data=\"/stocks\" /\u003e\n```\n\n## Options\n\nId, width, and height\n\n```jsx\n\u003cLineChart id=\"users-chart\" width=\"800px\" height=\"500px\" /\u003e\n```\n\nMin and max values\n\n```jsx\n\u003cLineChart min={1000} max={5000} /\u003e\n```\n\n`min` defaults to 0 for charts with non-negative values. Use `null` to let the charting library decide.\n\nMin and max for x-axis - *Chart.js*\n\n```jsx\n\u003cLineChart xmin=\"2025-01-01\" xmax=\"2025-02-01\" /\u003e\n```\n\nColors\n\n```jsx\n\u003cLineChart colors={[\"#b00\", \"#666\"]} /\u003e\n```\n\nStacked columns or bars\n\n```jsx\n\u003cColumnChart stacked={true} /\u003e\n```\n\nDiscrete axis\n\n```jsx\n\u003cLineChart discrete={true} /\u003e\n```\n\nLabel (for single series)\n\n```jsx\n\u003cLineChart label=\"Value\" /\u003e\n```\n\nAxis titles\n\n```jsx\n\u003cLineChart xtitle=\"Time\" ytitle=\"Population\" /\u003e\n```\n\nStraight lines between points instead of a curve\n\n```jsx\n\u003cLineChart curve={false} /\u003e\n```\n\nShow or hide legend\n\n```jsx\n\u003cLineChart legend={true} /\u003e\n```\n\nSpecify legend position\n\n```jsx\n\u003cLineChart legend=\"bottom\" /\u003e\n```\n\nDonut chart\n\n```jsx\n\u003cPieChart donut={true} /\u003e\n```\n\nPrefix, useful for currency - *Chart.js, Highcharts*\n\n```jsx\n\u003cLineChart prefix=\"$\" /\u003e\n```\n\nSuffix, useful for percentages - *Chart.js, Highcharts*\n\n```jsx\n\u003cLineChart suffix=\"%\" /\u003e\n```\n\nSet a thousands separator - *Chart.js, Highcharts*\n\n```jsx\n\u003cLineChart thousands=\",\" /\u003e\n```\n\nSet a decimal separator - *Chart.js, Highcharts*\n\n```jsx\n\u003cLineChart decimal=\",\" /\u003e\n```\n\nSet significant digits - *Chart.js, Highcharts*\n\n```jsx\n\u003cLineChart precision={3} /\u003e\n```\n\nSet rounding - *Chart.js, Highcharts*\n\n```jsx\n\u003cLineChart round={2} /\u003e\n```\n\nShow insignificant zeros, useful for currency - *Chart.js, Highcharts*\n\n```jsx\n\u003cLineChart round={2} zeros={true} /\u003e\n```\n\nFriendly byte sizes - *Chart.js*\n\n```jsx\n\u003cLineChart bytes={true} /\u003e\n```\n\nSpecify the message when the chart is loading\n\n```jsx\n\u003cLineChart loading=\"Loading...\" /\u003e\n```\n\nSpecify the message when data is empty\n\n```jsx\n\u003cLineChart empty=\"No data\" /\u003e\n```\n\nRefresh data from a remote source every `n` seconds\n\n```jsx\n\u003cLineChart refresh={60} /\u003e\n```\n\nYou can pass options directly to the charting library with:\n\n```jsx\n\u003cLineChart library={{backgroundColor: \"#eee\"}} /\u003e\n```\n\nSee the documentation for [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), [Highcharts](https://api.highcharts.com/highcharts), and [Chart.js](https://www.chartjs.org/docs/) for more info.\n\nTo customize datasets in Chart.js, use:\n\n```jsx\n\u003cLineChart dataset={{borderWidth: 10}} /\u003e\n```\n\nYou can pass this option to individual series as well.\n\n### Global Options\n\nTo set options for all of your charts, use:\n\n```javascript\nChartkick.options = {\n  colors: [\"#b00\", \"#666\"]\n}\n```\n\n### Multiple Series\n\nYou can pass a few options with a series:\n\n- `name`\n- `data`\n- `color`\n- `dataset` - *Chart.js only*\n- `points` - *Chart.js only*\n- `curve` - *Chart.js only*\n\n### Download Charts\n\n*Chart.js only*\n\nGive users the ability to download charts. It all happens in the browser - no server-side code needed.\n\n```jsx\n\u003cLineChart download={true} /\u003e\n```\n\nSet the filename\n\n```jsx\n\u003cLineChart download=\"boom\" /\u003e\n```\n\n**Note:** Safari will open the image in a new window instead of downloading.\n\nSet the background color\n\n```jsx\n\u003cLineChart download={{background: \"#fff\"}} /\u003e\n```\n\n## Installation\n\n### Chart.js\n\nRun\n\n```sh\nnpm install react-chartkick chart.js\n```\n\nAnd add\n\n```javascript\nimport { LineChart, PieChart } from 'react-chartkick'\nimport 'chartkick/chart.js'\n```\n\n### Google Charts\n\nRun\n\n```sh\nnpm install react-chartkick\n```\n\nAnd add\n\n```javascript\nimport Chartkick, { LineChart, PieChart } from 'react-chartkick'\n```\n\nAnd include on the page\n\n```html\n\u003cscript src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n```\n\nTo specify a language or Google Maps API key, use:\n\n```js\nChartkick.configure({language: \"de\", mapsApiKey: \"...\"})\n```\n\n### Highcharts\n\nRun\n\n```sh\nnpm install react-chartkick highcharts\n```\n\nAnd add\n\n```javascript\nimport { LineChart, PieChart } from 'react-chartkick'\nimport 'chartkick/highcharts'\n```\n\n### No Package Manager\n\nInclude the charting library and the Chartkick library\n\n```html\n\u003cscript src=\"https://unpkg.com/chart.js@4.4.6/dist/chart.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/chartkick@5.0.1\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-chartkick@0.5.4\"\u003e\u003c/script\u003e\n```\n\nCharts are prefixed with `ReactChartkick`, like `ReactChartkick.LineChart`.\n\n### Multiple Libraries\n\nIf more than one charting library is loaded, choose between them with:\n\n```jsx\n\u003cLineChart adapter=\"google\" /\u003e\n```\n\nOptions are `google`, `highcharts`, and `chartjs`\n\n## History\n\nView the [changelog](https://github.com/ankane/react-chartkick/blob/master/CHANGELOG.md)\n\n## Contributing\n\nEveryone is encouraged to help improve this project. Here are a few ways you can help:\n\n- [Report bugs](https://github.com/ankane/react-chartkick/issues)\n- Fix bugs and [submit pull requests](https://github.com/ankane/react-chartkick/pulls)\n- Write, clarify, or fix documentation\n- Suggest or add new features\n\nTo get started with development, run:\n\n```sh\ngit clone https://github.com/ankane/react-chartkick.git\ncd react-chartkick\nnpm install\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankane%2Freact-chartkick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankane%2Freact-chartkick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankane%2Freact-chartkick/lists"}