Skip to content

Commit 543bb11

Browse files
xidedixxidedix
committed
docs(chartjs): add README
1 parent e0f5c58 commit 543bb11

File tree

3 files changed

+118
-13
lines changed

3 files changed

+118
-13
lines changed

‎projects/coreui-angular-chartjs/README.md

Lines changed: 115 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,126 @@
1-
# CoreuiAngularChartjs
1+
<p align="center">
2+
<a href="https://coreui.io/">
3+
<img
4+
src="https://coreui.io/images/brand/coreui-signet.svg"
5+
alt="CoreUI logo"
6+
width="200"
7+
/>
8+
</a>
9+
</p>
210

3-
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
11+
<h3 align="center">CoreUI Angular wrapper for Chart.js</h3>
412

5-
## Code scaffolding
13+
<p align="center">
14+
<a href="https://coreui.io/angular/docs/components/chart/"><strong>Explore @coreui/angular-chartjs docs & examples »</strong></a>
15+
<br>
16+
<br>
17+
<a href="https://github.com/coreui/coreui-angular/issues/new?template=bug_report.md">Report bug</a>
18+
·
19+
<a href="https://github.com/coreui/coreui-angular/issues/new?template=feature_request.md">Request feature</a>
20+
·
21+
<a href="https://blog.coreui.io/">Blog</a>
22+
</p>
623

7-
Run `ng generate component component-name --project coreui-angular-chartjs` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project coreui-angular-chartjs`.
8-
> Note: Don't forget to add `--project coreui-angular-chartjs` or else it will be added to the default project in your `angular.json` file.
24+
## Status
925

10-
## Build
26+
[![npm package][npm-badge]][npm]
27+
[![NPM downloads][npm-download]][npm]
1128

12-
Run `ng build coreui-angular-chartjs` to build the project. The build artifacts will be stored in the `dist/` directory.
29+
[npm-badge]: https://img.shields.io/npm/v/@coreui/angular-chartjs/latest?style=flat-square
30+
[npm]: https://www.npmjs.com/package/@coreui/angular-chartjs
31+
[npm-download]: https://img.shields.io/npm/dm/@coreui/angular-chartjs.svg?style=flat-square
1332

14-
## Publishing
33+
##### install:
1534

16-
After building your library with `ng build coreui-angular-chartjs`, go to the dist folder `cd dist/coreui-angular-chartjs` and run `npm publish`.
35+
```bash
36+
npm install chart.js
37+
npm install @coreui/chartjs@3
38+
npm install @coreui/angular-chartjs
39+
````
1740

18-
## Running unit tests
41+
##### import:
1942

20-
Run `ng test coreui-angular-chartjs` to execute the unit tests via [Karma](https://karma-runner.github.io).
43+
```ts
44+
import { ChartjsModule } from '@coreui/angular-chartjs';
2145
22-
## Further help
46+
@NgModule({
47+
imports: [
48+
ChartjsModule,
49+
...
50+
```
2351
24-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
52+
##### usage:
53+
54+
```tsx
55+
@Component({
56+
selector: 'app-chart-sample',
57+
template: `<c-chart type="line" [data]="data" [options]="options" width="300"></c-chart>`,
58+
})
59+
export class ChartSample {
60+
61+
colors = {
62+
label: 'My dataset',
63+
backgroundColor: 'rgba(77,189,116,.2)',
64+
borderColor: '#4dbd74',
65+
pointHoverBackgroundColor: '#fff',
66+
}
67+
68+
labels = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
69+
70+
data = {
71+
labels: this.labels,
72+
datasets: [{
73+
data: [65, 59, 84, 84, 51, 55, 40],
74+
...this.colors,
75+
fill: {value: 65}
76+
}],
77+
}
78+
79+
options = {
80+
plugins: {
81+
legend: {
82+
display: false
83+
}
84+
},
85+
maintainAspectRatio: false,
86+
elements: {
87+
line: {
88+
tension: 0.4
89+
},
90+
}
91+
};
92+
}
93+
```
94+
![README.png](./README.png)
95+
96+
97+
### c-chart
98+
_component_
99+
100+
##### Inputs:
101+
102+
|name|description|type|default|
103+
|---|---|---|---|
104+
|`customTooltips`|Enables custom html based tooltips|`boolean`|_true_
105+
|`data`|The data passed to Chart.js chart|[`ChartData`](https://www.chartjs.org/docs/latest/general/data-structures.html)|**required**
106+
|`options`|The options object that is passed into the Chart.js chart|[`ChartOptions`](https://www.chartjs.org/docs/latest/general/options.html)|_undefined_
107+
|`plugins`|The plugins array that is passed into the Chart.js chart|[`Plugin[]`](https://www.chartjs.org/docs/latest/developers/plugins.html)|_undefined_
108+
|`redraw`|If true, will tear down and redraw chart on all updates|`boolean`|_false_
109+
|`type`|Chart.js chart type.|[`ChartType`](https://www.chartjs.org/docs/latest/charts/)|_bar_
110+
|`wrapper`|Put the chart into the wrapper with `display: block`.|[`ChartType`](https://www.chartjs.org/docs/latest/charts/)|_bar_
111+
|`height`|Height attribute applied to the rendered canvas (px)|`number`|_150_
112+
|`width`|Width attribute applied to the rendered canvas (px)|`number`|_undefined_
113+
|`id`|Html id attribute applied to the rendered canvas|`string`|_undefined_
114+
115+
##### Outputs:
116+
117+
|name|description|
118+
|---|---|
119+
|`getDatasetAtEvent`|Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
120+
|`getElementAtEvent`|Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
121+
|`getElementsAtEvent`|Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
122+
123+
124+
### See also:
125+
126+
- Chart.js docs [https://www.chartjs.org/docs/](https://www.chartjs.org/docs/)

‎projects/coreui-angular-chartjs/README.png

7.53 KB
Loading

‎projects/coreui-angular-chartjs/ng-package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,8 @@
1111
"allowedNonPeerDependencies": [
1212
"@coreui/chartjs",
1313
"chart.js"
14+
],
15+
"assets": [
16+
"README.png"
1417
]
1518
}

0 commit comments

Comments
 (0)