updated demo

fixed default values for options
added auto update series
updated README.md

README.md

@@ -43,9 +43,14 @@ imports: [
 In any component you can use the chart using:
 
 ```` html
-<apx-chart></apx-chart>
+<apx-chart [series]="series" [chart]="chart" [title]="title"></apx-chart>
 ````
 
+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 inserted using the attributes.
@@ -73,19 +78,34 @@ This is a list of all available attributes:
 @Input() theme: ApexTheme;
 ````
 
+#### Auto update series
+
+With the attribute `autoUpdateSeries` you can control if the chart component should
+call the `updateSeries` function automatically if the series attribute is changed.
+Set this attribute to false if you are using and changig the type property in your
+series for a mixed chart. This only has the effect that the whole chart rerenders
+even if only the series changes.
 
 ### Use methods
 
-If you want to access the methods of the components use this in your component:
+For a basic usage of the charts you dont need to use the methods of the chart.
+
+But if you want to toggle a series for example you need to call them. All 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 change the template to this:
+and chaning the template to this:
 ```` html
 <apx-chart #chartObj></apx-chart>
 ````
 
+Now you're able to call methods from your Component.
+
 ## Author
 
 [Morris Janatzek](http://morrisj.net) ([morrisjdev](https://github.com/morrisjdev))

package.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
-    "apexcharts": "^3.2.2",
+    "apexcharts": "^3.3.1",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",

projects/ng-apexcharts/README.md

@@ -1,28 +1,34 @@
+<p align="center">
+  <img src="https://morrisj.net/storage/icons/ng-apexcharts/icon.svg" width="180" />
+</p>
+
 # ng-apexcharts
 
-ng-apexcharts is an implementation of apexcharts for angular.
+ng-apexcharts is an implementation of [apexcharts](https://apexcharts.com/) for angular.
 It comes with one simple component that enables you to use apexcharts
 in an angular project.
 
+For a demo checkout: <a href="https://ngapexcharts-demo.stackblitz.io/" target="_blank">Stackblitz example</a>
+
 ## Installation
 
 1. Install using npm:
 
-````
+```` ts
 npm install apexcharts ng-apexcharts --save
 ````
 
 2. Open angular.json and under scripts add:
 
-````
+```` ts
 "scripts": [
   "node_modules/apexcharts/dist/apexcharts.min.js"
 ]
 ```` 
 
 3. Add ng-apexcharts-module to imports
 
-````
+```` ts
 imports: [
   BrowserModule,
   FormsModule,
@@ -36,16 +42,21 @@ imports: [
 
 In any component you can use the chart using:
 
+```` html
+<apx-chart [series]="series" [chart]="chart" [title]="title"></apx-chart>
 ````
-<apx-chart></apx-chart>
-````
+
+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 inserted using the attributes.
 This is a list of all available attributes:
 
-````
+```` ts
 @Input() chart: ApexChart;
 @Input() annotations: ApexAnnotations;
 @Input() colors: string[];
@@ -67,19 +78,34 @@ This is a list of all available attributes:
 @Input() theme: ApexTheme;
 ````
 
+#### Auto update series
+
+With the attribute `autoUpdateSeries` you can control if the chart component should
+call the `updateSeries` function automatically if the series attribute is changed.
+Set this attribute to false if you are using and changig the type property in your
+series for a mixed chart. This only has the effect that the whole chart rerenders
+even if only the series changes.
 
 ### Use methods
 
-If you want to access the methods of the components use this in your component:
-````
+For a basic usage of the charts you dont need to use the methods of the chart.
+
+But if you want to toggle a series for example you need to call them. All 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 change the template to this:
-````
+and chaning the template to this:
+```` html
 <apx-chart #chartObj></apx-chart>
 ````
 
+Now you're able to call methods from your Component.
+
 ## Author
 
 [Morris Janatzek](http://morrisj.net) ([morrisjdev](https://github.com/morrisjdev))

projects/ng-apexcharts/package.json

@@ -1,11 +1,11 @@
 {
   "name": "ng-apexcharts",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "an angular implementation of apexcharts",
   "peerDependencies": {
     "@angular/common": "^7.1.0",
     "@angular/core": "^7.1.0",
-    "apexcharts": "3.2.2"
+    "apexcharts": "^3.3.1"
   },
   "keywords": [
     "angular",

projects/ng-apexcharts/src/lib/chart/chart.component.ts

@@ -28,9 +28,9 @@ export class ChartComponent implements OnInit, OnChanges {
   @Input() chart: ApexChart;
   @Input() annotations: ApexAnnotations;
   @Input() colors: string[];
-  @Input() dataLabels: ApexDataLabels;
+  @Input() dataLabels: ApexDataLabels = {enabled: false};
   @Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;
-  @Input() stroke: ApexStroke;
+  @Input() stroke: ApexStroke = {curve: 'straight'};
   @Input() labels: string[];
   @Input() legend: ApexLegend;
   @Input() fill: ApexFill;
@@ -39,12 +39,21 @@ export class ChartComponent implements OnInit, OnChanges {
   @Input() responsive: ApexResponsive[];
   @Input() xaxis: ApexXAxis;
   @Input() yaxis: ApexYAxis | ApexYAxis[];
-  @Input() grid: ApexGrid;
+
+  @Input() grid: ApexGrid = {
+    row: {
+      colors: ['#f3f3f3', 'transparent'],
+      opacity: 0.5
+    }
+  };
+
   @Input() states: ApexStates;
   @Input() title: ApexTitleSubtitle;
   @Input() subtitle: ApexTitleSubtitle;
   @Input() theme: ApexTheme;
 
+  @Input() autoUpdateSeries = true;
+
   @ViewChild('chart') private chartElement: ElementRef;
   private chartObj: any;
 
@@ -56,6 +65,11 @@ export class ChartComponent implements OnInit, OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     setTimeout(() => {
+      if (this.autoUpdateSeries && Object.keys(changes).filter(c => c !== 'series').length === 0) {
+        this.updateSeries(this.series, true);
+        return;
+      }
+
       this.createElement();
     }, 0);
   }

src/app/app.component.html

@@ -1,9 +1,8 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<apx-chart #firstChart [series]="[form.value.series]"
+<apx-chart #chart [series]="form.value.series | series: form.value.type"
            [xaxis]="{ categories: form.value.xaxis }"
            [chart]="{
-              height: height,
-              type: 'line',
+              height: form.value.height,
+              type: form.value.type,
               zoom: {
                 enabled: false
               },
@@ -15,42 +14,48 @@
                     blur: 10,
                     opacity: 1
                 }}"
-
-  [grid]="{
-    row: {
-      colors: ['#f3f3f3', 'transparent'],
-      opacity: 0.5
-    }
-  }"
-   [title]="{ text: 'Product Trends by Month', align: 'left' }"
-           [stroke]="{curve: 'straight'}" [dataLabels]="{enabled: false}">
-
-</apx-chart>
-
-<input type="number" [(ngModel)]="height">
+           [title]="{ text: form.value.title }" [autoUpdateSeries]="false"></apx-chart>
 
 <form [formGroup]="form">
-  <div formGroupName="series">
-    <input type="text" formControlName="name">
-  </div>
-
+  Title: <input type="text" formControlName="title"><br>
+  Height: <input type="number" formControlName="height"><br>
+  Type: <select formControlName="type">
+  <option value="line">Line</option>
+  <option value="area">Area</option>
+  <option value="bar">Bar</option>
+  <option value="radar">Radar</option>
+</select>
 
   <h3>Values</h3>
-  <button (click)="addValue()">Add Value</button>
+  <button (click)="addSeries()">Add series</button>
+  <button (click)="addValue()">Add value</button>
 
   <div>
-    <div formGroupName="series" style="width: 20%; display: inline-block">
-      <div formArrayName="data">
-        <div *ngFor="let alias of form.get('series').get('data').controls; let i=index">
-          <label>
-            Value:
-            <input type="number" [formControlName]="i">
-          </label>
+    <div style="width: 80%; display: inline-block;" formArrayName="series">
+      <h4>Data</h4>
+
+      <div *ngFor="let series of form.get('series').controls; let i = index" style="width: 20%; display: inline-block">
+        <div [formGroupName]="i">
+          Name: <input type="text" formControlName="name"><br>
+          Type: <select formControlName="type">
+          <option value="line">Line</option>
+          <option value="area">Area</option>
+          <option value="bar">Bar</option>
+        </select>
+
+          <div formArrayName="data">
+            <div *ngFor="let alias of form.get('series').controls[i].get('data').controls; let y=index">
+              <label>
+                Value: <input type="number" [formControlName]="y">
+              </label>
+            </div>
+          </div>
         </div>
       </div>
     </div>
 
     <div formArrayName="xaxis" style="width: 20%; display: inline-block">
+      <h4>XAxis</h4>
       <div *ngFor="let alias of form.get('xaxis').controls; let i=index">
         <label>
           Value:
@@ -61,8 +66,6 @@ <h3>Values</h3>
   </div>
 </form>
 
-<button type="button" (click)="execute()">Execute</button><br>
-
 {{form.value | json}}
 
 <router-outlet></router-outlet>