Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/damingerdai/ngx-apexcharts
apexcharts 3rd party wrapper for angular
https://github.com/damingerdai/ngx-apexcharts
Last synced: 19 days ago
JSON representation
apexcharts 3rd party wrapper for angular
- Host: GitHub
- URL: https://github.com/damingerdai/ngx-apexcharts
- Owner: damingerdai
- License: mit
- Created: 2022-01-25T02:40:57.000Z (almost 3 years ago)
- Default Branch: develop
- Last Pushed: 2024-05-22T14:04:00.000Z (7 months ago)
- Last Synced: 2024-05-22T15:29:48.324Z (7 months ago)
- Language: TypeScript
- Size: 3.27 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Angular wrapper for ApexCharts to build interactive visualizations in Angular 13+.
## Examples
More than 80+ examples of all the chart types with sample codes can be found on the Angular Demos page of the website. Here's a basic line chart example built in codesandbox.
## Download and Installation
Use the Angular CLI's install [schematics](https://angular.io/guide/schematics) to set up ngx-apexcharts by running the following command:
```bash
ng add ngx-apexcharts
```
if you don't like the above way, the following is also supported.
1. Install using npm:
```ts
npm install apexcharts ngx-apexcharts --save
```
2. Open angular.json and under scripts add:
```ts
"scripts": [
"node_modules/apexcharts/dist/apexcharts.min.js"
]
```
3. Add ngx-apexcharts-module to imports
```ts
import { NgxApexchartsModule } from "ngx-apexcharts";
...
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgxApexchartsModule,
...
]
```
## Usage
In any component you can use the chart using:
```html
```
You need to provide at least the series and chart attribute to make sure the
chart can get created.
You can also use any other attribute from the following options.
### Options
All options of the chart can be inserted using the attributes.
This is a list of all available attributes:
```ts
@Input() chart: ApexChart;
@Input() annotations: ApexAnnotations;
@Input() colors: string[];
@Input() dataLabels: ApexDataLabels;
@Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;
@Input() stroke: ApexStroke;
@Input() labels: string[];
@Input() legend: ApexLegend;
@Input() fill: ApexFill;
@Input() tooltip: ApexTooltip;
@Input() plotOptions: ApexPlotOptions;
@Input() responsive: ApexResponsive[];
@Input() xaxis: ApexXAxis;
@Input() yaxis: ApexYAxis | ApexYAxis[];
@Input() grid: ApexGrid;
@Input() states: ApexStates;
@Input() title: ApexTitleSubtitle;
@Input() subtitle: ApexTitleSubtitle;
@Input() theme: ApexTheme;
```
You can visit the [docs](https://apexcharts.com/docs/) to read more about all the options listed above.
### Updating the chart
Changing the attributes will automatically call the relevant update methods of ApexCharts and re-render it.
### Calling core ApexCharts methods
You don't actually need to call updateSeries() or updateOptions() manually. Changing the props will automatically update the chart. But, in certain cases you may need to call these methods, so here's the reference.
| Method | Description |
| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| updateSeries | Allows you to update the series array overriding the existing one |
| updateOptions | Allows you to update the configuration object |
| toggleSeries | Allows you to toggle the visibility of series programatically. Useful when you have custom legend. |
| appendData | Allows you to append new data to the series array. |
| addText | The addText() method can be used to draw text after chart is rendered. |
| addXaxisAnnotation | Draw x-axis annotations after chart is rendered. |
| addYaxisAnnotation | Draw y-axis annotations after chart is rendered. |
| addPointAnnotation | Draw point (xy) annotations after chart is rendered. |
All the methods are proxied through the component so that you dont need to access the DOM by yourself.
Just reference the component as a ViewChild in your Component by using:
```ts
@ViewChild('chartObj') chart: ChartComponent;
```
and changing the template to this:
```html
```
Now you're able to call methods from your Component.
```javascript
this.chart.toggleSeries("series-1");
```
## How to call the methods of ApexCharts without referencing the chart component?
Sometimes, you may want to call methods of the core ApexCharts library from some other place, and you can do so on `this.$apexcharts` global variable directly. You need to target the chart by chart.id while calling this method
Example
```js
window.ApexCharts.exec("ngx-chart-example", "updateSeries", [
{
data: [40, 55, 65, 11, 23, 44, 54, 33]
}
]);
```
In the above method, `ngx-chart-example` is the ID of chart, `updateSeries` is the name of the method you want to call and the third parameter is the new Series you want to update.
More info on the `.exec()` method can be found here
All other methods of ApexCharts can be called the same way.
#### Turning off auto update of the series
With the attribute `autoUpdateSeries` you can control if the chart component should call the `updateSeries` function automatically if the series attribute is changed. It is set to true by default, but in a mixed/combo chart, set this attribute to false if you are using and changing the type property in your series. This only has the effect that the whole chart rerenders even if only the series changes.
## Supporting ApexCharts
ApexCharts is an open source project.
You can help by becoming a sponsor on Patreon or doing a one time donation on PayPal
## License
ngx-ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.
### Submitted by
Special thanks to [Morris Janatzek](http://morrisj.net) for contributing to ApexCharts project by creating this angular wrapper.