Creating a Sales Dashboard Using Angular & Highchart

In this tutorial, you'll learn how to create a sales dashboard using Angular 19. Since we are building a dashboard, it would be easier to interpret data using graphs. Therefore, for creating visually appealing graphs, we'll use Highcharts.

Creating a Sales Dashboard

Let's start by creating our Angular app from the very scratch. To get started, install the Angular CLI.

npm install -g @angular/cli

Once you have the Angular CLI installed, make use of the `ng` command to create a new Angular project named `angular-sales-dashboard`.

ng new angular-sales-dashboard

The above command will prompt you with a couple of questions,

 -  Which stylesheet format would you like to use? - You can opt for `scss`.

 - Do you want to enable Server-Side Rendering (SSR) and Static Site Generation? - You can type in No.

 -  Would you like to use the Server Routing and App Engine APIs (Developer Preview) for this server

application? - You can type in No.

Once done, it will install the required dependencies and create the Angular project with some boilerplate code for us to get started.

Project Structure

Inside the `src/app` folder, you can see the default `AppComponent`. This is our root component. If you check out the `app.component.html` file, you can see some HTML code and `<router-outlet></router-outlet>`, which is a placeholder directive where the router dynamically displays the component based on the routes defined in our `app.routes.ts` file. 

Currently, no routes are defined in `app.routes.ts`. We'll be defining them throughout this tutorial. Inside the `app` folder, you also have the `app.component.ts` file, which is the component file for `AppComponent`. It has the logic, methods, and properties related to `AppComponent`. Styles related to the HTML in `app.component.html` can be found in the `app.component.scss` file.

What We'll Create

We'll be creating a sales dashboard that will depict the different sales based on region, month, year, and other key metrics. For this, we'll be making use of some dummy JSON data and a highchart library for creating our charts. We'll be creating 3 different types of charts: line chart, column chart, and pie chart. Here is the same JSON data that we'll be using,

{
  "sales_by_region": [
    {
      "region": "North America",
      "sales": 560000
    },
    {
      "region": "Europe",
      "sales": 420000
    },
    {
      "region": "Asia",
      "sales": 300000
    },
    {
      "region": "South America",
      "sales": 160000
    },
    {
      "region": "Africa",
      "sales": 100200
    }
  ],
  "monthly_sales": [
    {
      "month": "January",
      "sales": 120000
    },
    {
      "month": "February",
      "sales": 135000
    },
    {
      "month": "March",
      "sales": 145000
    },
    {
      "month": "April",
      "sales": 160000
    },
    {
      "month": "May",
      "sales": 170000
    },
    {
      "month": "June",
      "sales": 180000
    },
    {
      "month": "July",
      "sales": 190000
    },
    {
      "month": "August",
      "sales": 200000
    }
  ],
  "yearly_sales": [
    {
      "year": 2020,
      "sales": 1200000
    },
    {
      "year": 2021,      
      "sales": 1300000
    },
    {
      "year": 2022,
      "sales": 1400000
    },
    {
      "year": 2023,
      "sales": 1543200
    }
  ]
}

Create a file called `data.json` inside the `src` folder and copy the above JSON data to `data.json`. Open the `app/app.html` file and remove all the existing code except the `<router-outlet></router-outlet>`. Now we are ready to create our components.

Dashboard Component

Let's start by creating the dashboard component, which will define our sales dashboard. For that, create a folder called `components`. From inside the `components` folder use the Angular CLI to create component,

ng g component dashboard

The command above will create the Dashboard component inside the components folder. As expected, it would have made an HTML file, a TypeScript file, a test file, and a .scss file for styling. Add the following HTML to the `dashboard.component.html` file.

<div class="dashboard-container">
  <!-- Header -->
  <header class="dashboard-header">
    <h1>Sales Dashboard</h1>
  </header>

  <!-- Main Content -->
  <main class="dashboard-main">
    <div class="dashboard-main-top">
      <!-- Line chart will be here -->
      <!-- Column chart will be here -->
    </div>
    <div class="dashboard-main-bottom">
        <!-- Pie chart will be here -->
    </div>
  </main>
</div>

Add the following style to the `dashboard.component.scss` file,

.dashboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dashboard-header {
  background: #1b3a1b;
  width: 100%;
  text-align: center;
  color: white;
}

.dashboard-main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dashboard-main-top{
  display: flex;
}

Now, when the application is run, we need to load the dashboard component in the `router-outlet`, for that, we need to specify the component in the `app.route.ts` file. Here is how it looks:

import { Routes } from '@angular/router';
import { DashboardComponent } from '../components/dashboard/dashboard.component';

export const routes: Routes = [
    { path: '', component: DashboardComponent },
    { path: '**', redirectTo: '' }
];

Save the above changes and start the Angular application.

npm start

Point your browser to `http://localhost:4200` to view the dashboard screen, which features a title header. Next, let's create the line chart.

Line Chart Component

From inside the `components` folder, use the Angular CLI to create a component,

ng g component line-chart

For using Highcharts in Angular, you need to install the following,

npm install highcharts --save
npm install highcharts-angular --save

The versions of Highcharts and Highcharts-Angular used are 12.2.0 and 4.0.1, respectively. Once installed, you can import both inside the `LineChartComponent`,

import  *  as  Highcharts  from  'highcharts';
import { HighchartsChartModule } from  'highcharts-angular';

Add `HighchartsChartModule` to the `LineChartComponent` import list.

@Component({
  selector: 'app-line-chart',
  imports: [HighchartsChartModule],
  templateUrl: './line-chart.component.html',
  styleUrl: './line-chart.component.scss'
})

We expect the data to be passed as input props inside `LineChartComponent`. Let's add an `@Input` decorator to the `LineChartComponent`.

@Input() data:  any  =  '';

Add an `ngOnInit` lifecycle hook after importing `OnInit` inside the `LineChartComponent`.

import { Component, Input, OnInit } from  '@angular/core';

Inside the `ngOnInit` method, let's define the `chartOptions` for rendering the Line chart. For creating the line chart, we'll be using the bare minimum configurations. So this is how the `ngOnInit` method looks,

this.chartOptions = {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Line Chart Example'
        },
        xAxis: {
            categories: this.data.yearly_sales.map((item: any) => item.year)
        },
        yAxis: {
            title: {
                text: 'USD'
            }
        },
        series: [{
            name: 'Yearly Sales',
            data: this.data.yearly_sales.map((item: any) => item.sales), // Assuming 'value' is the property you want to plot
            type: 'line'
        }]

In the chart options, the things we have defined are,

1.  The `type` of chart, in this case, is `line`

2.  The `title` of the chart.

3.  `xAxis` for which we have parsed the input data for `years`

4.  `yAxis` for title

5.  `series` where we have passed in the data to be plotted, which is the `sales`.

Here is how the complete `line-chart.component.ts` file looks,

typescript

import { Component, Input, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { HighchartsChartModule } from 'highcharts-angular';

@Component({
  selector: 'app-line-chart',
  imports: [HighchartsChartModule],
  templateUrl: './line-chart.component.html',
  styleUrl: './line-chart.component.scss'
})
export class LineChartComponent implements OnInit {

  @Input() data: any = '';

  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {};

  ngOnInit() {    
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'Line Chart Example'
      },
      xAxis: {
        categories: this.data.yearly_sales.map((item: any) => item.year)
      },
      yAxis: {
        title: {
          text: 'USD'
        }
      },
      series: [{
        name: 'Yearly Sales',
        data: this.data.yearly_sales.map((item: any) => item.sales), // Assuming 'value' is the property you want to plot
        type: 'line'
      }]
    };
  }
}

Next, you need to define the `highcharts-chart` element inside the `line-chart.component.html`.

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 200px; display: block;"
></highcharts-chart>

As seen above, we are passing the `chartOptions` to the `highcharts-chart` element.

Add the `LineChartComponent` to the `dashboard.component.html`. Here is how the modified `dashboard.component.html` looks:

<div class="dashboard-container">
  <!-- Header -->
  <header class="dashboard-header">
    <h1>Sales Dashboard</h1>
  </header>

  <!-- Main Content -->
  <main class="dashboard-main">
    <div class="dashboard-main-top">
      <app-line-chart [data]="jsonData"></app-line-chart>
    </div>
    <div class="dashboard-main-bottom">
      
    </div>
  </main>
</div>

Also, add the `LineChartComponent` to the `DashboardComponent` import list,

@Component({
  selector: 'app-dashboard',
  imports: [LineChartComponent],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.scss'
})

Save the above changes and refresh the screen, and you should be able to view the line chart. Next, let's add another component for rendering column charts.

Column Chart Component

First, let's create a component for the column chart.

ng g component bar-chart

Column charts are slightly different from line charts. Here, we need to modify the type of chart to `column` and bind our data accordingly.

Here is how the `bar-chart.component.ts` file looks:

typescript
import { Component, Input } from '@angular/core';
import * as Highcharts from 'highcharts';
import { HighchartsChartModule } from 'highcharts-angular';

@Component({
  selector: 'app-bar-chart',
  imports: [HighchartsChartModule],
  templateUrl: './bar-chart.component.html',
  styleUrl: './bar-chart.component.scss'
})
export class BarChartComponent {
  @Input() data: any = '';

  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {};

  ngOnInit() {
    this.chartOptions = {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Sales by Month'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May','June','July','Aug','Sep','Oct','Nov','Dec'],
      },
      yAxis: {
        title: {
          text: 'USD'
        }
      },
      series: [{
        type: 'column',
        name: 'Monthly Sales',
        data: this.data.monthly_sales.map((item: any) => item.sales)
      }]
    };
  }
}

Add the `highcharts-chart` element to the `bar-chart.component.html` file with the chart options,

html
<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions"

  style="width: 100%; height: 200px; display: block;"
>
</highcharts-chart>

Now let's add the `BarChartComponent` to our dashboard. Modify the `bar-chart.component.html` file to include the bar chart.

html
<div class="dashboard-container">
  <!-- Header -->
  <header class="dashboard-header">
    <h1>Sales Dashboard</h1>
  </header>

  <!-- Main Content -->
  <main class="dashboard-main">
    <div class="dashboard-main-top">
      <app-line-chart [data]="jsonData"></app-line-chart>
      <app-bar-chart [data]="jsonData"></app-bar-chart>
    </div>
    <div class="dashboard-main-bottom">
      
    </div>
  </main>
</div>

Include the `BarChartComponent` in the list of imports of `DashboardComponent`.

typescript

@Component({
  selector: 'app-dashboard',
  imports: [LineChartComponent, BarChartComponent],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.scss'
})

Save the above changes, and then refresh the page. You should now be able to see the Column chart alongside the line chart. Next, let's add a pie chart to our dashboard. 

Pie Chart Component

Start by creating a pie chart component.

ng g component pie-chart

Open the `pie-chart.component.ts` file and require imports as we did for the line chart and column chart. Here, we'll also be defining the `chartOptions`. This time, since it's a pie chart, we won't need to define the x and y axes.

Here is how the `pie-chart.component.ts` looks,

typescript
import { Component, Input } from '@angular/core';
import * as Highcharts from 'highcharts';
import { HighchartsChartModule } from 'highcharts-angular';

@Component({
  selector: 'app-pie-chart',
  imports: [HighchartsChartModule],
  templateUrl: './pie-chart.component.html',
  styleUrl: './pie-chart.component.scss'
})
export class PieChartComponent {
  @Input() data: any = '';

  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {};

  ngOnInit() {
    this.chartOptions = {
      chart: {
        type: 'pie'
      },
      title: {
        text: 'Sales by Region'
      },
      series: [{
        type: 'pie',
        name: 'Sales',
        data: this.data.sales_by_region.map((item: any) => {
          return {
            name: item.region,
            y: item.sales,
            sliced: true
          };
        })
      }]
    };
  }
}

Here we have defined the type of chart as `pie`. Inside the series where we are binding the data, we are setting the name of each pie as the region, and `y defines the value based on which the pie is defined. `sliced` is optional; if true, the pie will appear sliced.

Add the `highcharts-chart` to the `pie-chart.component.html`.

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 200px; display: block;"
>
</highcharts-chart>

Also, add the pie chart to the dashboard HTML and the list of imports in `DashboardComponent`.

@Component({
  selector: 'app-dashboard',
  imports: [LineChartComponent, BarChartComponent, PieChartComponent],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.scss'
})

Here is the final `dasboard.component.html` file,

html
<div class="dashboard-container">
  <!-- Header -->
  <header class="dashboard-header">
    <h1>Sales Dashboard</h1>
  </header>

  <!-- Main Content -->
  <main class="dashboard-main">
    <div class="dashboard-main-top">
      <app-line-chart [data]="jsonData"></app-line-chart>
      <app-bar-chart [data]="jsonData"></app-bar-chart>
    </div>
    <div class="dashboard-main-bottom">
      <app-pie-chart [data]="jsonData"></app-pie-chart>
    </div
  </main>
</div>

Save the above changes, and you'll be able to see the pie chart along with the column and line chart in the dashboard.

Conclusion

In this tutorial, we created an Angular 19 project from scratch and integrated Highcharts for creating interactive charts. There are many more options and a number of other chart variants that can be made using Highcharts. Take a look at the official documentation for detailed info.