{"id":17669962,"url":"https://github.com/colapdev/ngx-britecharts","last_synced_at":"2025-05-06T21:06:14.476Z","repository":{"id":21934286,"uuid":"93666852","full_name":"colapdev/ngx-britecharts","owner":"colapdev","description":"@colap-dev/ngx-britecharts is an Angular2 library for creating and displaying Britecharts charts (https://github.com/eventbrite/britecharts/) in your web application using D3.js v4. Checkout the demo: https://colapdev.github.io/ngx-britecharts/","archived":false,"fork":false,"pushed_at":"2022-12-08T18:19:49.000Z","size":10726,"stargazers_count":18,"open_issues_count":16,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-23T14:09:28.815Z","etag":null,"topics":["angular","angular2","angular4","angular5","chart","d3","d3v4","data-visualization","interactive-visualizations","javascript","svg"],"latest_commit_sha":null,"homepage":"","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/colapdev.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}},"created_at":"2017-06-07T18:29:38.000Z","updated_at":"2023-10-27T08:10:20.000Z","dependencies_parsed_at":"2022-08-20T06:11:08.253Z","dependency_job_id":null,"html_url":"https://github.com/colapdev/ngx-britecharts","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colapdev%2Fngx-britecharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colapdev%2Fngx-britecharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colapdev%2Fngx-britecharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colapdev%2Fngx-britecharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colapdev","download_url":"https://codeload.github.com/colapdev/ngx-britecharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252330719,"owners_count":21730690,"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","angular2","angular4","angular5","chart","d3","d3v4","data-visualization","interactive-visualizations","javascript","svg"],"created_at":"2024-10-24T01:09:00.009Z","updated_at":"2025-05-06T21:06:14.456Z","avatar_url":"https://github.com/colapdev.png","language":"JavaScript","readme":"# ngx-britecharts\n\n**@colap-dev/ngx-britecharts** is an Angular2+ library for creating and displaying [Britecharts](https://github.com/eventbrite/britecharts/) in your web application using D3.js v4. Demo available for Angular's versions 2, 4 and 5.\n\nDon't now what Britecharts is? [Check this out.](http://eventbrite.github.io/britecharts/)\n\n## Demo\n\nVisit https://colapdev.github.io/ngx-britecharts/.\n\n## Installation\n\n```shell\nnpm install @colap-dev/ngx-britecharts --save\n```\n\n## Using it in your project\n\nInclude the charts module.\n\n```typescript\nimport { ChartModule } from '@colap-dev/ngx-britecharts/dist';\n\n@NgModule({\n  imports: [\n    ...\n    ChartModule,\n    ...\n  ],\n  declarations: [\n   ...\n  ],\n  providers: [\n   ...\n  ],\n  bootstrap: [...]\n})\n```\n\n## Adding styles\n\nIn order to use the original Britecharts styles you'll need to include the needed CSS files.\nThere's a base file for all charts and then each chart has it's own CSS.\n\n```typescript\n@import '../../node_modules/britecharts/dist/css/common/common.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/bar.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/brush.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/bullet.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/donut.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/grouped-bar.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/line.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/scatter-plot.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/sparkline.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/stacked-area.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/stacked-bar.min.css';\n@import '../../../node_modules/britecharts/dist/css/charts/step.min.css';\n```\n\n## Chart types\n\nEach chart type is defined by a number defined in the enum **ChartType**.\n\n```typescript\nBar = 1\nBrush = 2\nBullet = 3\nDonut = 4\nGroupedBar = 5\nHeatmap = 6\nLegend = 7\nLine = 8\nScatterPlot = 9\nSparkline = 10\nStackedArea = 11\nStackedBar = 12\nStep = 13\n```\n\n## Rendering the chart\n\n### HTML\n\n```html\n\u003cngx-bc-chart #lineChart [data]=\"lineChartData\" [chartConfig]=\"lineChartConfig\" [chartType]=\"8\"\u003e\u003c/ngx-bc-chart\u003e\n```\n\n### Component\n\n```typescript\n@ViewChild('lineChart') lineChart: ChartComponent;\nprivate lineChartData = [...];\nprivate lineChartConfig = {\n    properties: {\n        isAnimated: true,\n        aspectRatio: 0.5,\n        grid: 'horizontal',\n        tooltipThreshold: 600,\n        margin: {\n            top: 60,\n            bottom: 50,\n            left: 50,\n            right: 30\n        },\n        dateLabel: 'fullDate',\n    },\n    click: this.onDemoLineChartClick,\n    tooltip: {\n        valueLabel: 'value',\n        title: 'Quantity Sold',\n    },\n    loading: false\n};\n```\n\nCheck the demos for examples of chart configurations.\n\n- The **properties** attributes are all optional, they correlate with their corresponding [Britechart chart API](http://eventbrite.github.io/britecharts/module-Bar.html).\n- The **click** handler expects a function.\n- If the **tooltip** attribute exists the corresponding tooltip for the chart will be set up. In some cases it is the [Mini-tooltip](http://eventbrite.github.io/britecharts/module-Mini-tooltip.html) and in others it is the [Tooltip](http://eventbrite.github.io/britecharts/module-Tooltip.html). Check [Britechart docs for more info](http://eventbrite.github.io/britecharts/).\n- If the **loading** attribute is present and it is **true** then the chart will show it loading state. Some charts doesn't have a loading state. In that case nothing will be shown (not even the chart).\n- In some cases, specially the donut chart, you will like to have some properties values to be related to the container's width. To achieve this you'll have to define **sizeRelativeToContainerWidth** in the config object. Every key contained in it will have its value set by dividing the container's width by the value set. Check **donutChartConfig** in the examples to see how this works.\n- If you would like to handle the custom events fired by the chart you should include the **events** attribute in the config. Each member of this attribute should be a custom event defined by Britecharts and a function to hanlde it. Check **donutChartConfig** in the examples to see how this works. Please mind that this may override the events used by the tootlip.\n\nIt's worth noting that all the API is exposed and public so you can interact with the chart and it's tooltip from your component. In the line chart example defined above you can access it and it's corresponding tooltip by doing:\n\n```typescript\nthis.lineChart.chart...\nthis.lineChart.tooltip...\n```\n\n#### Exporting the chart\n\nTo export the chart just call the **exportChart** function the chart exposes.\n\n**Parent:**\n\n*HTML:*\n\n```html\n\u003cngx-bc-chart #lineChart ....\u003e\u003c/ngx-bc-chart\u003e\n\u003cbutton (click)=\"exportChartClick()\" ....\u003eExport\u003c/button\u003e\n```\n\n*Component:*\n\n```typescript\n@ViewChild('lineChart') lineChart: ChartComponent;\nprivate exportChartClick() {\n    this.lineChart.chart.exportChart('Exported bar chart.png', 'Chart title');\n}\n```\n\nThe file name and chart title must be sent inside the event.\n\n### Data format\n\nThe data format used by the charts is the same defined by Britecharts, you can check each available type in their [docs](http://eventbrite.github.io/britecharts/global.html).\n\n## Running the demo\n\n 1. Clone this repo.\n 2. *cd* into *demo* folder.\n 3. *npm install*\n 4. *npm run start*\n 5. Browse to http://localhost:4200\n\n## Contributing\n\nWe are open to pull requests including:\n\n- More demos.\n- Better docs.\n- Tests.\n\n## Support\nFeel free to open any issue in case you need help.\n\n## Acknowledgments\n[Britecharts](https://github.com/eventbrite/britecharts/) community, specially [Marcos Iglesias](https://github.com/miglesiasEB) for his support and patience.\n\n[@dzurico](https://twitter.com/dzurico) for this post http://www.dzurico.com/how-to-create-an-angular-library/.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolapdev%2Fngx-britecharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolapdev%2Fngx-britecharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolapdev%2Fngx-britecharts/lists"}