Drag and Drop charts with Angular CDK and Highcharts

Drag and Drop charts with Angular CDK and Highcharts.

If you are building Dashboard application where you have multiple charts in that case,drag and drop would be handy.

Here i am going to use angular cdk (“@angular/cdk”: 8.2.3”) and highcharts (“highcharts”: 7.2.1”) versions.

Prerequisite:

I am assuming you have already created Angular Application ,if not then check out below link forSetting up the Local Environment and Work space.

https://angular.io/guide/setup-local

angular-highcharts only runs with versions of Angular greater than 8 and Highcharts greater than 7.

Installation

install latest version of angular-highcharts and highcharts with below command.

# install angular-highcharts and highcharts
npm i --save angular-highcharts highcharts

we are installing both angular-highcharts and highcharts but in our demo we are using angular-highcharts because it’s wrapper and if you want To use Highcharts modules you have to import them and provide them in a factory (required for aot). You can find the list of available modules in the highcharts folder ls -la node_modules/highcharts/modules.

Angular5 & angular6 support:

For angular5 and angular6 you have to install a specific version of angular-highcharts.

# angular5
npm i angular-highcharts@5

# angular6
npm i angular-highcharts@6

Angular Component Development Kit (CDK):

The @angular/cdk/drag-drop package from the Angular Component Development Kit (CDK) provides you the functionality to easily create drag & drop interfaces with full flexibility. It gives you an API that makes it much easier to create complex drag & drop interfaces without having to reinvent the wheel.

install latest version of CDK with below command.

npm install @angular/cdk

once you done with installation , lets starts with adding and integrating installed modules with our angular app.

Added both module chartModule and DragDropModule in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ChartModule } from 'angular-highcharts';
import { AppComponent } from './app.component';
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({

imports:      [ BrowserModule, FormsModule ,ChartModule,DragDropModule],
declarations: [ AppComponent ],
bootstrap:    [ AppComponent ]

})

export class AppModule { }

I have created two charts in app.component by importing ‘angular-highcharts’.
if u see series object Apparently it’s “required” in series object,but I didn’t need to specify a type so I put undefined, also used add() method for dynamically plot points on respective graphs.

import { Component } from '@angular/core';
import { Chart } from 'angular-highcharts';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
barchart = new Chart({
chart: {
type: 'bar'
},
title: {
text: 'barchart'
},
credits: {
enabled: false
},
series: [
{
name: 'BarLine 1',
data: [1, 2, 3],
type:undefined
}]

});

linechart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Linechart'
},
credits: {
enabled: false
},
series: [{
name: 'Line 1',
data: [1, 2, 3],
type:undefined
}
]
});

// add point to chart serie
add() {
this.linechart.addPoint(Math.floor(Math.random() * 10));
this.barchart.addPoint(Math.floor(Math.random() * 10));

}
}

add below snippet in app.component.html.

<div class="example-box" cdkDrag>
<div [chart]="linechart"></div>
</div>
<div class="example-box" cdkDrag>
<div [chart]="barchart"></div>
</div>
<button (click)="add()">Add Point!</button>

**_you can check out running application with given below link **

If you have any question please feel free to ask or any suggestion always welcome.

Thank you for reading !

#Angular #Typescript #Highcharts