{"id":20218283,"url":"https://github.com/z3ut/ng-interpolated-charts","last_synced_at":"2026-05-31T01:31:15.959Z","repository":{"id":143896527,"uuid":"93864122","full_name":"z3ut/ng-interpolated-charts","owner":"z3ut","description":"Angular component for interpolated-charts","archived":false,"fork":false,"pushed_at":"2020-06-06T12:32:44.000Z","size":759,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T03:05:29.924Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/z3ut.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-09T13:58:38.000Z","updated_at":"2020-06-10T16:37:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"39b6edb9-f664-4760-a570-d728e6f72429","html_url":"https://github.com/z3ut/ng-interpolated-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/z3ut%2Fng-interpolated-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3ut%2Fng-interpolated-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3ut%2Fng-interpolated-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3ut%2Fng-interpolated-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/z3ut","download_url":"https://codeload.github.com/z3ut/ng-interpolated-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241655204,"owners_count":19998001,"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-14T06:37:53.941Z","updated_at":"2026-05-31T01:31:15.952Z","avatar_url":"https://github.com/z3ut.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Interpolated Charts\n\nAngular 2 component for [interpolated-charts](https://github.com/z3ut/interpolated-charts)\n\n## Installation\n\n1. Install package with [npm](https://www.npmjs.com)\n\n```\nnpm install ng-interpolated-charts interpolated-charts --save\n```\n\n2. Import and register module\n\n```typescript\nimport { InterpolatedChartModule } from 'ng-interpolated-charts';\n\n@NgModule({\n  imports: [\n    InterpolatedChartModule\n  ]\n})\n```\n\n## Usage\n\nInside template:\n\n```html\n\u003c!-- line chart --\u003e\n\u003cinterpolated-chart\n  [data]=\"chartData\"\n  [yAxisValueFormat]=\"yAxisValueFormat\"\n  [valueFormatter]=\"valueFormatter\"\u003e\n\u003c/interpolated-chart\u003e\n\n\u003c!-- stack bar --\u003e\n\u003cinterpolated-stack-bar\n  [data]=\"stackBarData\"\u003e\n\u003c/interpolated-stack-bar\u003e\n```\n\nInside component:\n\n```typescript\nchartData = [\n  {\n    name: 'Minsk',\n    data: [\n      { 'date': new Date('2015-01-01T00:00:00'), 'value': 20 },\n      { 'date': new Date('2015-01-02T00:00:00'), 'value': 16 },\n      { 'date': new Date('2015-01-03T00:00:00'), 'value': 21 }\n    ]\n  }\n];\nyAxisValueFormat = value =\u003e `${value}°C`;\nvalueFormatter = ({interpolatedValue}) =\u003e `${interpolatedValue.toFixed(1)}°C`;\n\nstackBarData = [\n  { date: new Date('2015-01-01T00:00:00'), color: 'red', name: 'dry', value: 1 },\n  { date: new Date('2015-01-02T00:00:00'), color: 'red', name: 'dry', value: 1 },\n  { date: new Date('2015-01-03T00:00:00'), color: 'yellow', name: 'wet', value: 2 },\n  { date: new Date('2015-01-04T00:00:00'), color: 'yellow', name: 'wet', value: 2 },\n\n  { date: new Date('2015-01-06T00:00:00'), color: 'blue', name: 'snow', value: 3 },\n  { date: new Date('2015-01-07T00:00:00'), color: 'blue', name: 'snow', value: 3 },\n  { date: new Date('2015-01-11T00:00:00'), color: 'green', name: 'ice', value: 4 },\n  { date: new Date('2015-01-12T00:00:00'), color: 'green', name: 'ice', value: 4 },\n  { date: new Date('2015-01-13T00:00:00'), color: 'green', name: 'ice', value: 4 }\n];\n```\n\n## Documentation\n\nChart documentation [here](https://github.com/z3ut/interpolated-charts#documentation)\n\nComponent inputs:\n\n### Line Chart config\n\nBinding name | Config Name\n--- | ---\nwidth | width\nheight | height\nmargin | margin\nmaxTimeRangeDifferenceToDraw | maxTimeRangeDifferenceToDraw\nxAxisTimeFormat | xAxisTimeFormat\nyAxisValueFormat | yAxisValueFormat\ncurve | curve\ninterpolationMaxIterationCount | interpolationMaxIterationCount\ninterpolationAccuracy | interpolationAccuracy\nmouseMoveTimeTreshold | mouseMoveTimeTreshold\nxAxisDateFrom | xAxisDateFrom\nxAxisDateTo | xAxisDateTo\n\nMouse events:\n\nBinding name |\n--- |\nonMouseEnter |\nonMouseLeave |\nonMouseMove |\nonMouseClick |\n\n### Stack Bar config\n\nBinding name | Config Name\n--- | ---\nwidth | width\nheight | height\nmargin | margin\nbackgroundColor | backgroundColor\nmaxTimeRangeDifferenceToDraw | maxTimeRangeDifferenceToDraw\nxAxisTimeFormat | xAxisTimeFormat\nmouseMoveTimeTreshold | mouseMoveTimeTreshold\nxAxisDateFrom | xAxisDateFrom\nxAxisDateTo | xAxisDateTo\n\nMouse events:\n\nBinding name |\n--- |\nonMouseEnter |\nonMouseLeave |\nonMouseMove |\nonMouseClick |\n\n### Marker plugin config\n\nBinding name | Config Name\n--- | ---\ncx | cx\ncy | cy\nradius | radius\nfill | fill\nstroke | stroke\nstrokeWidth | strokeWidth\n**markerSort** | sort\n\n### Tooltip plugin config\n\nBinding name | Config Name\n--- | ---\ntooltipWidth | tooltipWidth\nhorizontalMouseMargin | horizontalMouseMargin\nverticalBorderMargin | verticalBorderMargin\nheaderFormatter | headerFormatter\ntopicFormatter | topicFormatter\nvalueFormatter | valueFormatter\n**tooltipSort** | sort\n\n## Development\n\n[Library creation docs](https://github.com/angular/angular-cli/wiki/stories-create-library)\n\nLibrary location in project - projects/ng-interpolated-charts.\n\nBuild library (with ng-packagr to Angular Package Format): ```ng build ng-interpolated-charts```\n\nPublish to npm: ```npm publish projects/ng-interpolated-charts```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz3ut%2Fng-interpolated-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fz3ut%2Fng-interpolated-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz3ut%2Fng-interpolated-charts/lists"}