@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/
MIT License
@colap-dev/ngx-britecharts is an Angular2+ library for creating and displaying Britecharts in your web application using D3.js v4. Demo available for Angular's versions 2, 4 and 5.
Don't now what Britecharts is? Check this out.
Visit https://colapdev.github.io/ngx-britecharts/.
npm install @colap-dev/ngx-britecharts --save
Include the charts module.
import { ChartModule } from '@colap-dev/ngx-britecharts/dist';
@NgModule({
imports: [
...
ChartModule,
...
],
declarations: [
...
],
providers: [
...
],
bootstrap: [...]
})
In order to use the original Britecharts styles you'll need to include the needed CSS files. There's a base file for all charts and then each chart has it's own CSS.
@import '../../node_modules/britecharts/dist/css/common/common.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/bar.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/brush.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/bullet.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/donut.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/grouped-bar.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/line.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/scatter-plot.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/sparkline.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/stacked-area.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/stacked-bar.min.css';
@import '../../../node_modules/britecharts/dist/css/charts/step.min.css';
Each chart type is defined by a number defined in the enum ChartType.
Bar = 1
Brush = 2
Bullet = 3
Donut = 4
GroupedBar = 5
Heatmap = 6
Legend = 7
Line = 8
ScatterPlot = 9
Sparkline = 10
StackedArea = 11
StackedBar = 12
Step = 13
<ngx-bc-chart #lineChart [data]="lineChartData" [chartConfig]="lineChartConfig" [chartType]="8"></ngx-bc-chart>
@ViewChild('lineChart') lineChart: ChartComponent;
private lineChartData = [...];
private lineChartConfig = {
properties: {
isAnimated: true,
aspectRatio: 0.5,
grid: 'horizontal',
tooltipThreshold: 600,
margin: {
top: 60,
bottom: 50,
left: 50,
right: 30
},
dateLabel: 'fullDate',
},
click: this.onDemoLineChartClick,
tooltip: {
valueLabel: 'value',
title: 'Quantity Sold',
},
loading: false
};
Check the demos for examples of chart configurations.
It'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:
this.lineChart.chart...
this.lineChart.tooltip...
To export the chart just call the exportChart function the chart exposes.
Parent:
HTML:
<ngx-bc-chart #lineChart ....></ngx-bc-chart>
<button (click)="exportChartClick()" ....>Export</button>
Component:
@ViewChild('lineChart') lineChart: ChartComponent;
private exportChartClick() {
this.lineChart.chart.exportChart('Exported bar chart.png', 'Chart title');
}
The file name and chart title must be sent inside the event.
The data format used by the charts is the same defined by Britecharts, you can check each available type in their docs.
We are open to pull requests including:
Feel free to open any issue in case you need help.
Britecharts community, specially Marcos Iglesias for his support and patience.
@dzurico for this post http://www.dzurico.com/how-to-create-an-angular-library/.