{"id":23917,"date":"2023-06-27T11:47:28","date_gmt":"2023-06-27T11:47:28","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=23917"},"modified":"2026-01-13T11:34:39","modified_gmt":"2026-01-13T11:34:39","slug":"deviation-chart-highcharts-angular","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/deviation-chart-highcharts-angular\/","title":{"rendered":"Deviation chart with Highcharts and Angular"},"content":{"rendered":"

In this article, I will show you how to create a deviation chart using Highcharts and Angular.<\/p>\n

If you are not familiar with a deviation chart, here is some information: The chart is designed with two or more aligned bar charts. A graph displays a deviation relationship to feature how one or more sets of quantitative values differ from a reference set of values. A deviation chart is mainly used for quality measures.<\/p>\n

To create a deviation chart using Angular and Highcharts, follow these step-by-step instructions:
\nStep 1<\/b>
\nMake sure you have Node.js<\/code> installed. If not, download and install it from the following URL: https:\/\/nodejs.org\/en\/download.
\nStep 2<\/b>
\nCreate a new folder to store the code, and open it in the command prompt terminal.
\nStep 3<\/b>
\nNow, let’s create a new Angular app. Type the following command:
\nnpm install -g @angular\/cli<\/code>.
\nAfter the installation is complete, run the following command:
\nng new myHighchartApp<\/code>
\ncd myHighchartApp<\/code>
\nnpm install highcharts-angular --save<\/code>
\nStep 4<\/b>
\nCreate a new component for the deviation chart, to do that run the following command:
\nng generate component deviationchart<\/code>
\nStep 5<\/b>
\nTo create a deviation chart, I am using a bell curve, so I need to install the required package. Run the following command:
\nnpm install highcharts-histogram-bellcurve --save<\/code><\/p>\n

The project is divided into three files:<\/p>\n

    \n
  1. deviation-chart.component.ts<\/b>: This file contains the main logic and Highchart code.<\/li>\n
  2. deviation-chart.component.html<\/b>: This file is used for the view to convert the chart in the browser.<\/li>\n
  3. app.module.ts<\/b>: This one is for adding dependencies to the module.<\/li>\n<\/ol>\n

    Before checking the code, let me walk you through some explanations:
    \nIt is important to add the module histogram-bellcurve.js<\/code>, as it is necessary for creating the range. Additionally, I declare the variable Highcharts: typeof Highcharts = Highcharts<\/code>. This declaration is essential for the HTML page and the chartOptions. I specify the minimum and maximum range for the xAxis. In the series section, I define the chart type as a histogram, which allows to create step charts. To achieve the desired appearance of a step chart, you have to set the color as transparent. Finally, don\u2019t forget to define your data series as scatter.<\/p>\n

    Now, feel free to explore the code below for each file (link to Github project<\/a>):
    \ndeviation-chart.component.ts<\/b> code<\/p>\n

    import { Component, OnInit } from \"@angular\/core\";\r\nimport * as Highcharts from \"highcharts\/highcharts\";\r\nimport Bellcurve from \"highcharts\/modules\/histogram-bellcurve\";\r\nBellcurve(Highcharts);\r\n@Component({\r\n  selector: \"app-deviation-chart\",\r\n  templateUrl: \".\/deviation-chart.component.html\",\r\n  styleUrls: [\".\/deviation-chart.component.css\"]\r\n})\r\nexport class DeviationChartComponent {\r\n  title = \"myHighChartsApp\";\r\n  Highcharts: typeof Highcharts = Highcharts;\r\n  chartOptions: Highcharts.Options = {\r\n    title: {\r\n      text: \"Sample Count by Range\"\r\n    },\r\n    xAxis: {\r\n      min: 0,\r\n      max: 4,\r\n      tickInterval: 1\r\n    },\r\n    series: [\r\n      {\r\n        type: \"histogram\",\r\n        baseSeries: \"s1\",\r\n        zIndex: -1,\r\n        binsNumber: 5,\r\n        color: \"transparent\",\r\n        borderWidth: 2,\r\n        borderColor: \"green\"\r\n      },\r\n      {\r\n        type: \"scatter\",\r\n        data: [0.17, 0.17, 0.18, 0.22, 0.26, 0.67, 0.98, 2.8, 2.92, 3.3],\r\n        id: \"s1\",\r\n        visible: false,\r\n        showInLegend: false\r\n      }\r\n    ]\r\n  };\r\n}\r\n<\/pre>\n
    app.module.ts<\/b> code:<\/p>\n
    import { NgModule } from \"@angular\/core\";\r\nimport { BrowserModule } from \"@angular\/platform-browser\";\r\nimport { HighchartsChartModule } from \"highcharts-angular\";\r\nimport { AppRoutingModule } from \".\/app-routing.module\";\r\nimport { AppComponent } from \".\/app.component\";\r\nimport { DeviationchartComponent } from \".\/deviationchart\/deviationchart.component\";\r\n\r\n@NgModule({\r\n  declarations: [AppComponent, DeviationchartComponent],\r\n  imports: [BrowserModule, HighchartsChartModule, AppRoutingModule],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {}\r\n<\/pre>\n
    deviation-chart.component.html<\/b> code<\/p>\n
    <div class=\"content\" role=\"main\">\r\n  <highcharts-chart [Highcharts]=\"Highcharts\" [options]=\"chartOptions\" style=\"width: 100%; height: 400px; display: block;\">\r\n  <\/highcharts-chart>\r\n<\/div>\r\n<\/pre>\n
    To use this application, you need to run ng-Serve<\/code>. Once you do that, you will see the following result displayed (see below).
    \nThe code shows that the xAxis ranges from 0 to 4, with the chart type being a histogram. Additionally, the base series is connected to s1,
    \nwhich in turn connects to a scatter data series. Finally, the chart is made visible, but the legend<\/code> is set not to show using
    \n showInLegend<\/code> as false<\/code>.<\/p>\n
    \"A<\/p>\n
    Highcharts is a great tool for building interactive real time dashboard, with angular you can build faster applications. For more learning regarding Highcharts with angular you can read Practical Highcharts with angular book<\/a>. <\/p>\n
    \u00a0<\/p>\n
    Related posts<\/strong><\/h2>\n