{"id":21634,"date":"2021-11-30T14:46:13","date_gmt":"2021-11-30T14:46:13","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=21634"},"modified":"2026-01-13T11:22:20","modified_gmt":"2026-01-13T11:22:20","slug":"create-charts-with-angular-nestjs-highchart-and-mongodb","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/create-charts-with-angular-nestjs-highchart-and-mongodb\/","title":{"rendered":"Create charts with Angular, NestJS, Highchart, and MongoDB"},"content":{"rendered":"

 <\/p>\n

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<\/a> Node.js framework for building efficient, reliable, and scalable server-side applications, and MongoDB (NoSQL database program) with the Angular Framework.
\nAlong with the official Highcharts Angular wrapper<\/a>, we will use a bar chart to visualize data coming from the backend.<\/p>\n

Let\u2019s get started.
\nThis article is divided into three major parts:<\/p>\n

    \n
  1. Set Up a NestJS project.<\/li>\n
  2. Integration of NestJS app with MongoDB.<\/li>\n
  3. Create an Angular project with Highcharts.<\/li>\n<\/ol>\n

    Set up a NestJS Application<\/h2>\n
      \n
    1. To get started with NestJS, run the following command npm i -g @NestJS\/cli<\/code><\/li>\n
    2. To scaffold NestJS project(initial setup), which contains the base structure for your project, run the following command nest new project-name<\/code>. Then open the editor to see the code base:\"\"<\/li>\n
    3. Run the npm start<\/code> command and open your browser and navigate to http:\/\/localhost:3000\/<\/code>.<\/li>\n
    4. Use the command nest g resource<\/code> to generate any specific module in your application (such as the dashboard, employee, or department) nest g resource<\/code> 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<\/code> files out of the box.<\/li>\n
    5. Let\u2019s create a Department module by running the nest g resource Department<\/code> command:
      \n\"\"<\/li>\n
    6. We are not going to use CRUD operation in this example, so go with the no<\/code>:
      \n\"\"<\/li>\n<\/ol>\n

      Setting Up NestJS with MongoDB Database<\/h2>\n

      Here are the steps to create the MongoDB database:<\/p>\n

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

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

            Next, in the app.component.ts<\/code>, in the top lines we imported Highcharts from import * as Highcharts from \u201chighcharts\u201d<\/code> , and DataService<\/a>.<\/li>\n

          4. Create the service<\/a>.<\/li>\n
          5. The last step is to initialize<\/a> the chart data and options by adding the highcharts-chart<\/code> directive and some property binding into app.component.html<\/code>.<\/li>\n<\/ol>\n

            And here is the final result:
            \nAs you can see on the GIF below, the bar chart retrieves the data from the database<\/p>\n

            \"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

            A step-by-step tutorial to create interactive charts with Angular, Nestjs, Highchart, and MongoDB.<\/p>\n","protected":false},"author":249,"featured_media":21762,"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-21634","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\/21634","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=21634"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21634\/revisions"}],"predecessor-version":[{"id":29358,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21634\/revisions\/29358"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21762"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=21634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=21634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=21634"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=21634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}