{"id":15285545,"url":"https://github.com/angular2guy/ngx-simple-charts","last_synced_at":"2025-09-12T03:11:07.765Z","repository":{"id":58999211,"uuid":"326257513","full_name":"Angular2Guy/ngx-simple-charts","owner":"Angular2Guy","description":"Angular 19+ library for D3 based line, bar, donut and date/timeline charts with multiple entry points. A configurable service for token handling is provided.","archived":false,"fork":false,"pushed_at":"2024-11-23T07:09:34.000Z","size":4760,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T03:45:06.494Z","etag":null,"topics":["angular","angular-cli","angular-library","angular-service","angular19","chart","charts","d3","d3-barchart","d3-donutchart","d3-linechart","d3js","jwt-token","luxon","material-icons","npm","typescript"],"latest_commit_sha":null,"homepage":"https://angular2guy.wordpress.com","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/Angular2Guy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2021-01-02T19:38:02.000Z","updated_at":"2024-12-27T14:52:38.000Z","dependencies_parsed_at":"2023-11-09T17:26:04.532Z","dependency_job_id":"0936f6d6-237a-4476-b9bc-d9ad77a5bfd7","html_url":"https://github.com/Angular2Guy/ngx-simple-charts","commit_stats":{"total_commits":233,"total_committers":2,"mean_commits":116.5,"dds":0.07725321888412018,"last_synced_commit":"836c427d94737c0c2d886771066495e34e5c5f69"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular2Guy%2Fngx-simple-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular2Guy%2Fngx-simple-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular2Guy%2Fngx-simple-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular2Guy%2Fngx-simple-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Angular2Guy","download_url":"https://codeload.github.com/Angular2Guy/ngx-simple-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252810273,"owners_count":21807759,"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":["angular","angular-cli","angular-library","angular-service","angular19","chart","charts","d3","d3-barchart","d3-donutchart","d3-linechart","d3js","jwt-token","luxon","material-icons","npm","typescript"],"created_at":"2024-09-30T15:05:59.055Z","updated_at":"2025-09-12T03:11:07.733Z","avatar_url":"https://github.com/Angular2Guy.png","language":"TypeScript","readme":"# NgxSimpleCharts\n\nThis is a small chart library for Angular based on D3js. It currently supports single line and multi line charts with a legend. Bar and Donut charts are now supported too. The token service and token interceptor are now included in a configurable manner. The Bar charts, line charts, donut, and Date/Timeline  charts and the services are in separate entry points to enable the Angular Compiler to  put only the required code in the modules that use the features. Its purpose is to enable fast updates to new Angular versions. To enable the fast updates and due to limited time the library will continue have a small feature set.\n\n## Minimum Supported Angular Version\nAngular 20\n\n[![CodeQL](https://github.com/Angular2Guy/ngx-simple-charts/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/Angular2Guy/ngx-simple-charts/actions/workflows/codeql-analysis.yml)\n\n## Articles\n* [A scrolling Date/Timeline Chart with Angular Material Components](https://angular2guy.wordpress.com/2023/07/01/a-scrolling-date-timeline-chart-with-angular-material-components/)\n* [Developing and Using Angular Libraries](https://angular2guy.wordpress.com/2021/07/31/developing-and-using-angular-libraries/)\n* [Ngx-Simple-Charts multiline and legend support howto](https://angular2guy.wordpress.com/2021/10/02/ngx-simple-charts-multiline-and-legend-support-howto/)\n* [Multiple Entry Points for the NgxSimpleCharts Angular Library](https://angular2guy.wordpress.com/2021/12/26/multiple-entry-points-for-ngxsimplecharts-angular-library/)\n* [Donut Charts are added to the Ngx-Simple-Charts library](https://angular2guy.wordpress.com/2022/09/10/donut-charts-are-added-to-the-ngx-simple-charts-library/)\n* [Configurable Services in the NgxSimpleCharts library](https://angular2guy.wordpress.com/2022/09/13/configurable-services-in-the-ngx-simple-charts-library/)\n\n## Line Charts\nTo use the line chart component this module has to be imported: [NgxLineChartsModule](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/line/src/lib/ngx-line-charts.module.ts)\n\nThen the component can be used: [\u003csc-line-chart [chartPoints]=\"...\" [replaceName]=\"...\" [replaceSymbol]=\"...\"\u003e\u003c/sc-line-chart\u003e](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/line/src/lib/sc-line-chart/sc-line-chart.component.ts) \n\nThe lines are defined in the ChartPoints interface. To draw multiple lines in a chart multiple chartPoints have to be provided.  The interface for the chartPoints can be found here: [ChartPoints](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/line/src/lib/sc-line-chart/model/chart-points.ts)\n\nTo enable styling of the chart these classes can be used: [Component.scss](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/line/src/lib/sc-line-chart/sc-line-chart.component.scss)\nThe classes have to be overwritten with '::ng-deep' and the ViewEncapsulation.ShadowDom is not supported for the enclosing component. To style multiple lines '::ng-deep' classes with the naming convention line-'ChartPoints.name'(for example: 'line-abc') with the name in lower case can be used. The ChartPoints.name is filtered with this Regex: '[^a-zA-Z0-9\\-]' that cuts off the name if a character is found that is not a letter, number or '-'(for example 'line-Abc1.d' -\u003e 'line-abc1') and changes it to lower case.\n\nThe legend shows the names of the ChartPoints in the color that set for the lines. If one 'ChartPoints.name' should be replaced the 'replaceSymbol' has to be a string that the 'ChartPoints.name' includes and is replaced with the 'replaceName'.\n\nThe Line Charts are animated.\n\n## Bar Charts\nTo use the bar chart component this module has to be imported: [NgxBarChartsModule](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/bar/src/lib/ngx-bar-charts.module.ts)\n\nThen the component can be used: [\u003csc-bar-chart [chartBars]=\"...\"\u003e\u003c/sc-bar-chart\u003e](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/bar/src/lib/sc-bar-chart/sc-bar-chart.component.ts) \n\nThe bars are defined in the ChartBars interface. The interface for the chartPoints can be found here: [ChartBars](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/bar/src/lib/sc-bar-chart/model/chart-bars.ts)\n\nTo enable styling of the chart these classes can be used: [Component.scss](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/bar/src/lib/sc-bar-chart/sc-bar-chart.component.scss)\nThe classes have to be overwritten with '::ng-deep' and the ViewEncapsulation.ShadowDom is not supported for the enclosing component. To style multiple bars '::ng-deep' classes with the naming convention line-'ChartBar.x'(for example: 'bar-abc') with the name in lower case can be used. The ChartBar.x is filtered with this Regex: '[^a-zA-Z0-9\\-]' that cuts off the name if a character is found that is not a letter, number or '-'(for example 'bar-Abc1.d' -\u003e 'line-abc1') and changes it to lower case.\n\nThe Bar Charts are animated.\n\n## Donut Charts\nTo use the bar chart component this module has to be imported: [NgxDonutChartsModule](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/donut/src/lib/ngx-donut-charts.module.ts)\n\nThen the component can be used: [\u003csc-donut-chart [chartState]=\"...\" [chartSlices]=\"...\"\u003e\u003c/sc-donut-chart\u003e](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/donut/src/lib/sc-donut-chart/sc-donut-chart.component.ts)\n\nThe slices are defined in the ChartSlices interface. The interface for the chartSlices can be found here: [ChartSlices](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/donut/src/lib/sc-donut-chart/model/chart-slices.ts)\n\nThe chartState is a string with the values of 'ready' or 'not-ready'. The animation starts when 'not-ready' is set to 'ready'.\n\nTo enable styling the optional 'color' property of the ChartSlice can be used to provide a custom color. It needs to be in Css color format. \n\n## Date/TimeLine Charts\nThis is a scolling chart to display time periods in bars vertically in units of years or months. \nTo use the Date/Timeline chart componnent this module has to be imported: [NgxDateTimeChartsModule](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/date-time/src/lib/ngx-date-time-charts.module.ts)\n\nThen the component can be used: [\u003csc-date-time-chart [showDays]=\"...\" [items]=\"...\"\u003e\u003c/sc-date-time-chart\u003e](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/date-time/src/lib/sc-date-time-chart/sc-date-time-chart.component.ts)\nThe property 'showDays' switches the on the view with months and days and the 'items' property contains the [ChartItems](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/date-time/src/lib/sc-date-time-chart/model/chart-item.ts) to display.\n\n## Token Services\nThe services/interceptors for the Jwt token handling are now included. \n\nTo use the token handling this module has to be imported: [NgxServiceModule](https://github.com/Angular2Guy/ngx-simple-charts/blob/master/projects/ngx-simple-charts/base-service/src/lib/ngx-service.module.ts)\n\nExamples howto use it can be found in the [AngularAndSpring](https://github.com/Angular2Guy/AngularAndSpring) and [AngularPortfolioMgr](https://github.com/Angular2Guy/AngularPortfolioMgr) projects.\n\n## Some time in the future\nFor more features pull requests are welcome.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular2guy%2Fngx-simple-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular2guy%2Fngx-simple-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular2guy%2Fngx-simple-charts/lists"}