Here, we will learn how to install highcharts or setup highcharts development environment to use highcharts in our web application with examples.
In our tutorial, we are going to use highcharts with jQuery in our application. So, first we need to add jQuery reference in our application either by direct downloading or by using jQuery CDN. To know how to add jQuery reference refer, jQuery Environment Setup tutorial.
After completion of adding jQuery reference, now we need to add highcharts reference in our application. In two ways, we can add highcharts reference in our application, those are
To download the highcharts library, open higcharts.com URL and download the available zip folder which will contain JavaScript files and examples.
After download take highcharts.js file, add it in your project. Now, we can add the reference of downloaded higcharts.js file like as shown below in the header section of HTML pages.
<html>
<head>
<title>Highcharts Example</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="~/highchart/highcharts.js"></script>
</head>
<body>
<div> </div>
</body>
</html>
If you observe the HTML code, we added jQuery reference from CDN and highcharts reference directly from the local folder.
In case, if you don’t want to download the highcharts library, then you can directly add it to our webpage by referencing it from public CDN (Content Delivery Network) like as shown below.
<html>
<head>
<title>Highcharts Example</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
</head>
<body>
<div> </div>
</body>
</html>
If you observe the above code, we are referring both jQuery and Highcharts from available CDN networks.
Generally, the CDN’s will provide a performance benefit by reducing the loading time, because the files will be hosted on multiple servers which are spread across the globe so when a user requests the file, it will be served from the nearest server to them.
In case, if you want to download the highcharts library from Node.js NPM, use the following command.
npm install highcharts --save
In the next chapters, we will learn how to use higcharts in our web applications with examples.