In the previous chapter, we learned how to add higcharts library in our webpage. Now we learn how to create a simple bar chart using highcharts library with examples.
Now create a webpage like as shown below by including highcharts and jQuery library references with simple div to bind the chart.
<html>
<head>
<title>Highcharts Bar Chart</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 id="container" style="width:100%; height:400px;"></div>
</body>
</html>
If you observe the above code, we created a div tag with id, width and height properties. The div tag is useful to bind the chart details which are created by highcharts library.
Generally, the highcharts will use JavaScript object structure to define the options or settings of chart like as shown below.
<script type="text/javascript">
$(function() {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
If you observe the above code, we defined different properties like chart, title, xAxis, yAxis, and series to plot the chart based on our requirements.
Following table lists the different type of chart properties available in highcharts library to draw the charts.
Property | Description |
---|---|
chart | It is useful to define the type of chart. |
title | It is the text that will be presented at the top of a chart. |
subtitle | It is useful to define the subtitle for chart. |
xAxis | It is useful to configure the values to be displayed on the X-Axis. |
yAxis | It is useful to configure the values to be displayed on the Y-Axis. |
tooltip | It is useful to show the tooltip that describes the values on that particular part of the chart when hovering over a series or a point on the chart. |
legend | It is useful show the data series in the graph and allows for enabling and disabling one or more series. |
series | It is useful to define the data to be displayed on the chart. |
The following picture will show detailed information about the properties which we will use in charts.
Following is the example of creating the bar chart using highcharts library.
<html>
<head>
<title>Highcharts Bar Chart</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script type="text/javascript">
$(function() {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;">
</div>
</body>
</html>
If you observe the above code, we mentioned the chart type as “bar”. When we execute the above highcharts example, we will get the result like as shown below.
This is how we can use highcharts library to create a different type of charts based on our requirements.