Create charts with Angular, NestJS, Highchart, and MongoDB

In this article, we will create a bar chart to visualize the department table of a particular student count. To do that, we will walk through the integration of NestJS Node.js framework for building efficient, reliable, and scalable server-side applications, and MongoDB (NoSQL database program) with the Angular Framework.
Along with the official Highcharts Angular wrapper, we will use a bar chart to visualize data coming from the backend.

Let’s get started.
This article is divided into three major parts:

1. Set Up a NestJS project.
2. Integration of NestJS app with MongoDB.
3. Create an Angular project with Highcharts.

Set up a NestJS Application

1. To get started with NestJS, run the following command npm i -g @NestJS/cli
2. To scaffold NestJS project(initial setup), which contains the base structure for your project, run the following command nest new project-name. Then open the editor to see the code base:
3. Run the npm start command and open your browser and navigate to http://localhost:3000/.
4. Use the command nest g resource to generate any specific module in your application (such as the dashboard, employee, or department) nest g resource command not only scaffold all the NestJS building blocks (module, service, controller classes), but also an entity class such as DTO classes, and the testing .spec files out of the box.
5. Let’s create a Department module by running the nest g resource Department command:
   
6. We are not going to use CRUD operation in this example, so go with the no:
   

Setting Up NestJS with MongoDB Database

Here are the steps to create the MongoDB database:

1. Login to mongodb and create an organisation and create a project inside the organisation.
2. Click on Build a Database.
3. Choose a region, cluster name, cloud provider and spec.
4. Configure a user name and password for the database.
5. Select Connect your application.
6. Copy the connection string since we need it in the NestJS application.
7. Integrate MongoDB by running npm install --save @NestJS/mongoose mongoose
8. Import the MongooseModule into the root AppModule and pass the connection string
9. Create create-department.dto.ts inside src/dto folder
10. Create department.entity.ts inside src/entity folder, the entity consists of two parts:Department interface and Department schema (mongodb table structure)
11. Inside departments.module.ts add the MongooseModule which provides the forFeature() method to configure the schema, so that we can use in the current module scope and further export the same by adding MongooseModule to the export array.
12. Once you’ve registered the schema, you can inject a Department model into the DepartmentsService using the @InjectModel() decorator.
13. A controller’s departments.controller.ts purpose is to receive specific requests for the application. For example, handling http requests.
14. Lastly, set the cors property to true, to enable CORS with default settings.

Set up an Angular project with Highcharts

1. To set up an Angular project, follow angular instructions Setting up the local environment and workspace. To visualize the data, include the official Highcharts Angular wrapper, then import the Highcharts module:
   1. To install highcharts-angular and the Highcharts library, just run the following instruction: npm install highcharts-angular --save.
   2. To import the package go to app.module.ts file and import the module HighchartsChartModule from the highcharts-angular package.
   3. To build Highcharts charts, install Highcharts: npm install highcharts --save.

   Next, in the app.component.ts, in the top lines we imported Highcharts from import * as Highcharts from “highcharts” , and DataService.

2. Create the service.
3. The last step is to initialize the chart data and options by adding the highcharts-chart directive and some property binding into app.component.html.

And here is the final result:
As you can see on the GIF below, the bar chart retrieves the data from the database