Drag and drop charts with Angular and Highcharts

Whether you want to create a dashboard or some other application with floating charts, Angular makes it easy to move charts around in a drag-and-drop fashion.

In this quick tutorial, you’ll learn how to create a project that looks like the image below (check also the live project on stackblitz):

Let’s get started 🙂

For this project, we’re using the following technologies:

• Angular CDK angular/cdk 8.2.3.
• Highcharts V8.0.0.
• Highcharts-Angular.

The project is set up using an Angular application environment and workspace with the following settings:

• node 6.10.2+
• npm 4.6.1+
• angular/cli 6.0.0+

If you are not familiar with this type of environment, the official Angular documentation describes how to set up the local environment and workspace.

Let’s move on and create the project!

The project is divided into this standard files architecture:

Next up is the installation of highcharts-angular and the Highcharts library:

# install highcharts-angular and highcharts
npm install highcharts-angular highcharts

Highcharts allow us to access the highcharts library, and highchats-angular is the official angular wrapper. To use those packages, you have to import them. So, in the app.module.ts file, I import the module HighchartsChartModule from the highcharts-angular package.

import { HighchartsChartModule } from 'highcharts-angular';
 @NgModule({
  imports: [
    ...
    HighchartsChartModule

And, in the app.component.ts file, I import Highcharts like this:

import * as Highcharts from 'highcharts';

We also have to install The @angular/cdk/drag-drop package from the Angular Component Development Kit (CDK). This package is central in this project since it includes the functionality to easily create drag & drop interfaces with full flexibility using an API.

Here is the command line to install the latest version of CDK:

npm install @angular/cdk

Once the package is installed, we can add and integrate its main modules to the angular app.
Here is how we add both modules Highcharts-angular and DragDropModule in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HighchartsChartModule } from 'highcharts-angular';
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
  imports:      [ BrowserModule, FormsModule,HighchartsChartModule ,DragDropModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Now, let’s create some charts for the test. Let’s use a line chart and a bar chart in app.component for this demo.

We’ll use a highcharts instance to customize the charts by accessing the API:

import { Component } from "@angular/core";
import * as Highcharts from "highcharts";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  Highcharts = Highcharts;
  linechart = {
    series: [
      {
        data: [1, 2, 3]
      }
    ],
    chart: {
      type: "line"
    },
    title: {
      text: "linechart"
    }
  };
  barchart = {
    series: [
      {
        data: [1, 2, 3]
      }
    ],
    chart: {
      type: "bar"
    },
    title: {
      text: "barchart"
    }    
  };
}

Finally, add an HTML snippet into app.component.html:

<div class="example-box" cdkDrag>
<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="linechart"
  style="width: 100%; height: 400px; display: block;" &gt</highcharts-chart>
</div&gt
<div class="example-box" cdkDrag>
<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="barchart"
  style="width: 100%; height: 400px; display: block;" ></highcharts-chart>
</div>

I hope you find this tutorial useful. Let me know if you have any questions or comments.