local environment and workspace<\/a>.<\/p>\nLet\u2019s move on and create the project!<\/p>\n
The project is divided into this standard files architecture:<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/02\/11094653\/image1.jpg\")
<\/p>\n
Next up is the installation of highcharts-angular and the Highcharts library:<\/p>\n
# install highcharts-angular and highcharts\r\nnpm install highcharts-angular highcharts<\/pre>\nHighcharts allow us to access the highcharts library, and highchats-angular<\/b> is the official angular wrapper. To use those packages, you have to import them. So, in the app.module.ts<\/code> file, I import the module HighchartsChartModule<\/code> from the highcharts-angular package.<\/p>\nimport { HighchartsChartModule } from 'highcharts-angular';\r\n @NgModule({\r\n imports: [\r\n ...\r\n HighchartsChartModule<\/pre>\nAnd, in the app.component.ts<\/code> file, I import Highcharts like this:<\/p>\nimport * as Highcharts from 'highcharts';\r\n<\/pre>\nWe also have to install The @angular\/cdk\/drag-drop<\/b> 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.<\/p>\n
Here is the command line to install the latest version of CDK:<\/p>\n
npm install @angular\/cdk\r\n<\/pre>\nOnce the package is installed, we can add and integrate its main modules to the angular app.
\nHere is how we add both modules Highcharts-angular<\/b> and DragDropModule<\/code> in app.module.ts<\/code><\/p>\nimport { NgModule } from '@angular\/core';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { FormsModule } from '@angular\/forms';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { HelloComponent } from '.\/hello.component';\r\nimport { HighchartsChartModule } from 'highcharts-angular';\r\nimport { DragDropModule } from '@angular\/cdk\/drag-drop';\r\n@NgModule({\r\n imports: [ BrowserModule, FormsModule,HighchartsChartModule ,DragDropModule],\r\n declarations: [ AppComponent, HelloComponent ],\r\n bootstrap: [ AppComponent ]\r\n})\r\nexport class AppModule { }<\/pre>\nNow, let\u2019s create some charts for the test. Let\u2019s use a line chart and a bar chart in app.component<\/code> for this demo.<\/p>\nWe\u2019ll use a highcharts instance to customize the charts by accessing the API:<\/p>\n
import { Component } from \"@angular\/core\";\r\nimport * as Highcharts from \"highcharts\";\r\n@Component({\r\n selector: \"my-app\",\r\n templateUrl: \".\/app.component.html\",\r\n styleUrls: [\".\/app.component.css\"]\r\n})\r\nexport class AppComponent {\r\n Highcharts = Highcharts;\r\n linechart = {\r\n series: [\r\n {\r\n data: [1, 2, 3]\r\n }\r\n ],\r\n chart: {\r\n type: \"line\"\r\n },\r\n title: {\r\n text: \"linechart\"\r\n }\r\n };\r\n barchart = {\r\n series: [\r\n {\r\n data: [1, 2, 3]\r\n }\r\n ],\r\n chart: {\r\n type: \"bar\"\r\n },\r\n title: {\r\n text: \"barchart\"\r\n } \r\n };\r\n}<\/pre>\nFinally, add an HTML snippet into app.component.html<\/code>:<\/p>\n<div class=\"example-box\" cdkDrag>\r\n<highcharts-chart \r\n [Highcharts]=\"Highcharts\"\r\n [options]=\"linechart\"\r\n style=\"width: 100%; height: 400px; display: block;\" ><\/highcharts-chart>\r\n<\/div>\r\n<div class=\"example-box\" cdkDrag>\r\n<highcharts-chart \r\n [Highcharts]=\"Highcharts\"\r\n [options]=\"barchart\"\r\n style=\"width: 100%; height: 400px; display: block;\" ><\/highcharts-chart>\r\n<\/div>\r\n<\/pre>\nI hope you find this tutorial useful. Let me know if you have any questions or comments.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to use Highcharts-Angular to create an application with floating charts.<\/p>\n","protected":false},"author":249,"featured_media":20551,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[822,1094,1031],"coauthors":[779],"class_list":["post-19081","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-angular","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/249"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=19081"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19081\/revisions"}],"predecessor-version":[{"id":29227,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19081\/revisions\/29227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20551"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=19081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=19081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=19081"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=19081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Drag](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/02\/12095643\/ezgif.com-resize.gif\")
<\/p>\n