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;" ></highcharts-chart> </div> <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.
Comments
Anand | 2 years ago
Hi
How to do dynamic dashboard with drag and drop feature? See for like this
https://user-images.githubusercontent.com/7148684/43591545-e26bc124-9673-11e8-8a74-271592d82ad4.png
Mustapha Mekhatria | 2 years ago
Hi,
Please, get in touch with your support: https://www.highcharts.com/support/
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.