In this article, we discuss how to create a histogram chart in angular using highchart. First, let us know the definition of a histogram chart and why we need these graphs.
Histogram: Its graphical representation of any organizes group of data points into user-specific ranges. it’s appearance similar to the bar chart. It takes many data points and grouping them into logical ranges or bins. Let’s draw the synchronized chart.
First we need to install highchart in our applications
npm install highcharts --save
npm install highcharts-angular --save
After installing module lets add a module in our app.module.ts file.
.... import { HighchartsChartModule } from 'highcharts-angular'; ... @NgModule({ imports: [ ..., HighchartsChartModule], .... })
After adding a module in the app.module file we can use it in our component to draw the chart. Let’s create app.component.ts file and add import highchat module using “import * as Highcharts from ‘highcharts’;” After we need to add the histogram module need to import for draw the chart. for that we need to write below code to import histogram module.
import Histogram from 'highcharts/modules/histogram-bellcurve';
Histogram(Highcharts);
Without importing histogram module its not load the data its throws error “Missing histogram module”.
Below is the full embeded code for the Histogram Chart using Highchart you can easily used in your application.
1 2
No Responses