{"id":19220080,"url":"https://github.com/nativescript-community/ui-chart","last_synced_at":"2026-04-24T09:02:30.164Z","repository":{"id":45938753,"uuid":"230665801","full_name":"nativescript-community/ui-chart","owner":"nativescript-community","description":"A powerful chart / graph plugin, supporting line, bar, pie, radar, bubble, and candlestick charts as well as scaling, panning and animations.","archived":false,"fork":false,"pushed_at":"2025-02-22T14:40:23.000Z","size":17093,"stargazers_count":34,"open_issues_count":11,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T18:08:22.986Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nativescript-community.github.io/ui-chart/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["farfromrefug"]}},"created_at":"2019-12-28T20:53:04.000Z","updated_at":"2025-02-22T14:40:27.000Z","dependencies_parsed_at":"2024-02-27T21:31:21.648Z","dependency_job_id":"cfe23a21-1157-444e-8ede-1dc7a5ccb0e7","html_url":"https://github.com/nativescript-community/ui-chart","commit_stats":{"total_commits":560,"total_committers":7,"mean_commits":80.0,"dds":"0.18928571428571428","last_synced_commit":"fd78f7556adb49686a5b19481a309e577e8f9c00"},"previous_names":["akylas/nativescript-chart"],"tags_count":148,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247535517,"owners_count":20954576,"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-09T14:33:54.698Z","updated_at":"2026-04-24T09:02:20.143Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":["Plugins"],"sub_categories":["UI Plugins"],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-chart.svg)](https://www.npmjs.com/package/@nativescript-community/ui-chart)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-chart.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-chart)\n[![GitHub forks](https://img.shields.io/github/forks/nativescript-community/ui-chart.svg)](https://github.com/nativescript-community/ui-chart/network)\n[![GitHub stars](https://img.shields.io/github/stars/nativescript-community/ui-chart.svg)](https://github.com/nativescript-community/ui-chart/stargazers)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\n-   `tns plugin add @nativescript-community/ui-chart`\n\n---\n\n\r\n[](#migration-to-2x)\r\n\r\n## Migration to 2.x\n\nIn 2.x most methods like `setColor`/`getColor` have been changed to properties like `color`\nYou can either to it manually and update them all (you should get tsc errors for removed or renamed methods), or you can use a regexp like `/set([A-Z])(\\w*?)\\(/` to search and replace (first group should be lowercase in the replace) with something like `\\L$1$2=(`\nThen use typings to fix potential name change\n\n\r\n[](#usage)\r\n\r\n## Usage\n\nFor gestures to work, make sure to add the following code block inside main application file (e.g. app.ts):\n\n```typescript\nimport { install } from '@nativescript-community/ui-chart';\ninstall();\n```\n\nYou can also check [Wiki](https://github.com/nativescript-community/ui-chart/wiki) for any useful material.\n\n\r\n[](#plain-nativescript)\r\n\r\n## Plain NativeScript\n\n\u003cspan style=\"color:red\"\u003eIMPORTANT: \u003c/span\u003eMake sure you include `xmlns:ch=\"@nativescript-community/ui-chart\"` on the Page element.\n\n### XML\n\n```XML\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:ch=\"@nativescript-community/ui-chart\"\u003e\n    \u003cScrollView\u003e\n        \u003cStackLayout\u003e\n            \u003cLabel text=\"Line Chart\" fontSize=\"20\"/\u003e\n            \u003cch:LineChart id=\"line-chart\" backgroundColor=\"lightgray\" width=\"300\" height=\"350\" loaded=\"onLineChartLoaded\"/\u003e\n        \u003c/StackLayout\u003e\n    \u003c/ScrollView\u003e\n\u003c/Page\u003e\n```\n\n### TypeScript\n\n```typescript\nimport { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';\nimport { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';\nimport { LineData } from '@nativescript-community/ui-chart/data/LineData';\n\nexport function onLineChartLoaded(args) {\n    const chart = args.object as LineChart;\n\n    chart.dragEnabled = true;\n    chart.scaleEnabled = true;\n\n    const data = new Array(500).fill(0).map((v, i) =\u003e ({\n        index: i,\n        value: Math.random() * 1,\n    }));\n\n    const sets = [];\n    const set = new LineDataSet(data, 'Legend Label', 'index', 'value');\n    set.color = 'blue';\n    sets.push(set);\n\n    // Create a data object with the data sets\n    const ld = new LineData(sets);\n\n    // Set data\n    chart.data = ld;\n}\n```\n\n\r\n[](#nativescript--vue)\r\n\r\n## NativeScript + Vue\n\n```javascript\nVue.registerElement('LineChart', () =\u003e require('@nativescript-community/ui-chart').LineChart);\n```\n\n```html\n\u003cLineChart ref=\"chart\" width=\"300\" height=\"400\" @loaded=\"onChartLoaded\"\u003e \u003c/LineChart\u003e\n```\n\n```javascript\nimport { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';\nimport { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';\nimport { LineData } from '@nativescript-community/ui-chart/data/LineData';\n```\n\n```javascript\nonChartLoaded() {\n    const chart = this.$refs.chart['nativeView'] as LineChart;\n    chart.backgroundColor = 'white';\n\n    chart.drawGridBackground = false;\n\n    // enable scaling and dragging\n    chart.dragEnabled = true;\n    chart.scaleEnabled = true;\n\n    // force pinch zoom along both axis\n    chart.petPinchZoomEnabled = true;\n\n    // disable dual axis (only use LEFT axis)\n    chart.axisRight.enabled = false;\n\n    const myData = new Array(500).fill(0).map((v, i) =\u003e ({\n        index: i,\n        value: Math.random() * 1,\n    }));\n\n    const sets = [];\n    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');\n    set.setColor('blue');\n    sets.push(set);\n\n    // Create a data object with the data sets\n    const ld = new LineData(sets);\n\n    // Set data\n    chart.data = ld;\n}\n```\n\n\r\n[](#nativescript--angular)\r\n\r\n## NativeScript + Angular\nRegister the element in app.module.ts\n```javascript\nregisterElement('LineChart', () =\u003e require('@nativescript-community/ui-chart').LineChart);\n```\n\n```html\n\u003cLineChart width=\"300\" height=\"400\" (loaded)=\"onChartLoaded($event)\"\u003e \u003c/LineChart\u003e\n```\n\n```javascript\nimport { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';\nimport { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';\nimport { LineData } from '@nativescript-community/ui-chart/data/LineData';\n```\n\n```javascript\nonChartLoaded(args) {\n    const chart = args.object as LineChart;\n    chart.backgroundColor = 'white';\n\n    chart.drawGridBackground = false;\n\n    // enable scaling and dragging\n    chart.dragEnabled = true;\n    chart.scaleEnabled = true;\n\n    // force pinch zoom along both axis\n    chart.petPinchZoomEnabled = true;\n\n    // disable dual axis (only use LEFT axis)\n    chart.axisRight.enabled = false;\n\n    const myData = new Array(500).fill(0).map((v, i) =\u003e ({\n        index: i,\n        value: Math.random() * 1,\n    }));\n\n    const sets = [];\n    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');\n    set.color = 'blue';\n    sets.push(set);\n\n    // Create a data object with the data sets\n    const ld = new LineData(sets);\n\n    // Set data\n    chart.data = ld;\n}\n```\n\n\r\n[](#about)\r\n\r\n## About\n\nThis plugin is based on [MPAndroidChart](https://github.com/PhilJay/MPAndroidChart), a powerful \u0026 easy to use chart library. Therefore, special thanks goes to Philipp Jahoda, the creator of [MPAndroidChart](https://github.com/PhilJay/MPAndroidChart) and the rest of his team.\n\nInstead of directly importing existing native libraries, this library has been rewritten in TypeScript, using [@nativescript-community/ui-canvas](https://github.com/nativescript-community/ui-canvas) plugin API as a basis. Plugin 'ui-canvas' is an extremely powerful tool that converts Android Native Canvas API to a cross-platform API for NativeScript framework. In few words, 'ui-chart' has the same code-base for both Android and iOS.\n\nAdditionally, [@nativescript-community/gesturehandler](https://github.com/nativescript-community/gesturehandler) plugin is used for handling chart gestures.\n\nIn short, these are the benefits of rewriting library into a NativeScript plugin:\n\n-   Same codebase for Android and iOS. Makes maintaining the library very easy.\n-   Smaller apps size because there are no native libs or native frameworks to consume space. All done with the power of {N}\n\nOriginally, the main goal was to prevent the need for marshalling all datasets. This is extremely heavy, costly and unnecessary!\n\nUpon running demo samples, one can conclude it is the fastest drawing library, in comparison to `nativescript-ui-chart` and `nativescript-mpchart`.\n\nThat is because:\n\n-   It does not marshal or recreate any subset of the data sets, but directly uses the provided array instead\n-   It can share the same data array between multiple datasets\n-   It can still use the power of native arrays to NOT marshal arrays of positions while drawing lines with [@nativescript-community/ui-canvas](https://github.com/nativescript-community/ui-canvas)\n\n\r\n[](#documentation)\r\n\r\n## Documentation\n\nThe NativeScript 'ui-chart' plugin is based on the [MPAndroidChart](https://github.com/PhilJay/MPAndroidChart) library.\nIn few words, its API is identical. The possibility to add API reference will be considered in the future.\n\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-chart/lists"}