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.

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 [email protected]

# angular6
npm i [email protected]

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular 8 Updates And Summary of New Features

Angular 8 Updates And Summary of New Features. Differential loading, web workers, Dynamic imports for lazy routes, CLI workflow improvements. Ivy and bazel.

TypeScript, Angular, Firebase & Angular Material Master class Tutorial

As the course progresses, you'll get familiar with: TypeScript, Angular Application Architecture, and Angular CLI. Angular Modules and Angular Components. Angular's Component LifeCycle Hooks....

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript. This tutorial gets you off the ground with Angular. We are going to use the official CLI (command line) tool to generate boilerplate code.