Highcharts have been around since 2009 helping IT professionals, deep tech aficionados, and even recent graduates to present data in a user-friendly manner.
It is basically a complex word for charts used by developers while in the development stage of web applications. It comes with extensive documentation, high responsiveness, and industry-leading accessibility support.
This blog will help you understand plotting bar charts in Angular utilizing the npm package Highcharts.
In this blog we will cover:
- What is an Angular Bar Chart?
- What is npm?
- Components of npm
- What is Highcharts?
- What is an Angular Highchart?
- Features of Angular Highcharts
- Required Installations for the Process
- Hands-On
- Conclusion
What is an Angular Bar Chart?
Angular Bar Chart is one of the most popular category chart designs for comparing frequency, count, total, or an average of data in several categories using horizontal bars of identical height but various lengths.
This graph is perfect for displaying changes in an item’s value over time. A collection of rectangles extending from the left to right of the chart towards the values of data points are used to show data.
What is npm?
Npm is the world’s largest software registry. Npm is used by open-source developers all around the world to publish and share their code.
Node Package Manager is also known as npm. It’s a JavaScript package manager for the Node platform.
Components of npm
- You can use the website to search for third-party packages, create profiles, and manage your packages.
- The npm CLI is a command-line interface that allows you to connect with npm from a terminal.
- The registry is a large database of JavaScript code that is open to the public.
What is Highcharts?
Highcharts is a JavaScript-based charting package that adds interactive charting functionality to web applications. Highcharts has a large number of charts to choose from. Line charts, spline charts, area charts, bar charts, pie charts, and other types of graphs are examples. This course will walk you through the fundamentals of Highcharts.
What is an Angular Highchart?
Highchart Angular Wrapper is an open-source Angular component that delivers an aesthetic and feature-rich Highcharts representation within an Angular application.
It can be used in connection with other Angular components. There are chapters that go over all of the Highcharts’ basic components and show how they may be used in an Angular application.
Features of Angular Highcharts
- Compatible: All modern browsers, including iPhone/iPad browsers and Internet Explorer 6 and later, are supported. SVG is used in modern browsers to render graphics, while VML is used in older versions of Internet Explorer.
- 100% TypeScript: TypeScript in its simplest form Because the entire Highcharts API is available in TypeScript, no JavaScript is required.
- No Plugins Required: No requirement for client-side plug-ins like Flash player or Java as Highcharts uses native browser technologies and charts can run without modification on modern mobile devices.
- Flexibility: After the chart is created, series and points can be added dynamically at any time. Hooks for events are supported. Interactions with servers are supported.
Required Installations for the Process
- Highchart: It is a JavaScript charting library that is used to enhance web applications by adding different interactive charting capabilities.
- Highchart Angular: It is an Angular wrapper that provides rich Highcharts visualizations within an application in the different components.
Hands-On
In this hands-on, we will begin with an online compiler for angular called StackBlitz which gives us the flexibility of an already created folder structure. We will be using this compiler to create flexibility for users to plot bar charts. We will first begin with exploring the files created by default and then alter the folder structure as per our need.
In creating a new html file, we will alter the input parameter value and change the template URL to point to the newly created html file for the child component. We will then install the highcharts and the highcharts angular wrapper to be able to plot the bar charts. Post that we will import the highcharts component into the app module file. To test out the configuration of highcharts we will first create a normal bar chart with many values. Finally, on success, we will create a bar chart utilizing the various different parameters offered by highcharts and have a look at the different features offered.
To perform the hands-on on a local machine, you can follow the steps mentioned in the below link of the original angular documentation to create a new project and then follow the hands-on steps shown below.
https://angular.io/tutorial/toh-pt0
To follow the steps we performed, you can navigate to the link below. The link below is an online compiler for angular and can be used to code logics, test out features, create simple applications, and much more.
https://stackblitz.com/edit/angular
Once you click on the above link, you will be navigated to an online compiler as shown in the image below. This is the default layout that is created for us. Stackblitz even allows us to link our projects to the GitHub repository which makes it easy for us to keep a record.
A default file is created with the name hello.component.ts which takes input for the name from the app.component.ts file as shown in the image below using the Input decorator.
We need to add an ngOnInit() lifecycle so we will extend the class to OnInit and add the lifecycle inside the class.
Navigate to the app.component.html file and delete the unwanted part of the html page.
In the left navigation pane, create a new file with the name hello.component.html.
In case you wish to change the name input parameter on the html page, open the app.component.ts file and change the value of the name variable. You will see the same reflected on the html page.
Open the hello.component.ts file and change the template key value pair to templateUrl as the key and the value targeting the newly created html file.
Navigate to the hello.component.html file and add the below content and you will see the same reflected on the UI.
Now, we need to install the highcharts package. To do so, under the dependencies section, enter the name ‘highcharts’ and hit enter. The package will be installed.
Open the package.json file and cross verify the highcharts package installation.
Post that, we will install the highcharts angular wrapper. To do so, under the dependencies section in the left navigation pane, type in highcharts-angular and hit enter.
Cross verify the package installation in the package.json file.
Now, open the app.module.ts file.
Import the HighchartsChartComponent from the angular wrapper and declare the same in the declarations section.
Now, open the hello.component.html file and add the below code. This will plot the charts on the UI screen.
Open the hello.component.ts file and import highcharts.
You can close the UI preview meanwhile while we code and complete the required process by clicking on the Close button on the top of the screen.
For configuring the Highcharts, create Highcharts and create chartOptions for configuring the type.
We need to define the type of chart inside the chart options. Choose the type as a bar.
Now, if we need to define the axis values. Using the below code, we’ll define the x-axis categories.
Post that we will define the y-axis title.
We will then define the tooltip parameter that would be visible on hovering over the chart.
Finally, we will define the series that will consist of the data that is to be plotted on the chart. Finally, save the file.
Open the UI preview and you will now see the bar chart plotted.
If you hover over a bar, you will see the respective values.
Now, let’s make a bar chart with lesser values, using the various offerings of highcharts and making it a proper visible chart. Define the type of the chart as a bar.
Using the title and subtitle keys, we can define the same for the plotted chart.
Using the legend key, we will define the alignment, position, background colors, etc. for the legends of the chart.
Then, we will define the xAxis and yAxis titles and categories and labels.
Post which we will define the tooltip and the plotting options for the chart.
We will then use the credits parameter to disable the watermark of highcharts and define the data using the series parameter. Post that saves the file.
Now when you open the preview, you will see the newly plotted bar chart.
Now if you hover over the charts, you will see the different values as per the plotted chart and the defined structure in the configuration.
Similarly, you can check out the same for the different colored bars.
Now, if you wish to see only the population of one year, then in that case, in the legends, you can click on the other years to disable the other bars. Accordingly, you will see the bar adjusted.
Now, let’s toggle the switch for the year 1990 population. Then you will see the bars of the 2 years plotted accordingly.
Conclusion
In this hands-on, we saw how we can use the online compiler for angular called StackBlitz which gives us the flexibility of an already created folder structure. We then used the compiler to create flexibility for users to plot bar charts. We first began with exploring the files created by default and then altered the folder structure as per our needs. Creating a new html file, we altered the input parameter value and changed the template URL to point to the newly created html file for the child component.
We then installed the highcharts and the highcharts angular wrapper to be able to plot the bar charts. Post that we imported the highcharts component into the app module file. To test out the configuration of highcharts we first created a normal bar chart with many values. Finally, on success, we created a bar chart utilizing the various different parameters offered by highcharts and had a look at the different features offered. We will come up with more such use cases in our upcoming blogs. Stay tuned to keep getting all updates about our upcoming new blogs on AWS and relevant technologies.
Meanwhile …
Keep Exploring -> Keep Learning -> Keep Mastering
This blog is part of our effort towards building a knowledgeable and kick-ass tech community. At Workfall, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you’re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at workfall.com/partner today.
