How to create horizontal bar chart in js
How to create horizontal bar chart in js?
Bar Charts are among the most common chart types that are used to compare frequency, count, total, or average of data in different categories with a horizontal bar. They are ideal for showing variations in the value of an item over time.
Let’s see, how to create simple horizontal bar chart in js.
Step-1: Adding Script file
Include ej2.min.js script file in your sample. It contains all dependencies to render the bar chart.
bar.html
<html>
<head>
// Adding ej2.min.js CDN link
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
</html>
Step-2: Creating Chart Container
Create a container for bar chart to get render.
bar.html
<html>
<body>
// Chart container
<div id="container"></div>
</body>
</html>
Step-3: Creating the chart
Basic Horizontal Bar Chart
Consider the following data to be rendered the horizontal bar chart.
Library Visitors Summary | |
Months | Number of Visitors |
Jan | 50 |
Feb | 57 |
Mar | 48 |
Apr | 60 |
May | 70 |
Jun | 48 |
Here are the steps for creating the chart:
- Create chart instance by using new ej.charts.Chart().
- Assign the data using dataSource property in series.
- Bind the Months and Number of visitors to xName and yName properties in series.
- Set the chart type to bar using type property in series.
- Now append the chart instance to the container to render the bar chart.
// bar.html <html> <head> // Adding ej2.min.js CDN link <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> // Adding bar.js script file <script src="bar.js" type="text/javascript"></script> </head> </html>
// bar.js
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: "Category",
title: "Months"
},
//Initializing Primary Y Axis
primaryYAxis: {
title: "Number of Visitors"
},
//Initializing Chart Series
series: [
{
type: "Bar",
dataSource: [
{ month: "Jan", visitors: 50 },
{ month: "Feb", visitors: 57 },
{ month: "Mar", visitors: 48 },
{ month: "Apr", visitors: 60 },
{ month: "May", visitors: 70 },
{ month: "Jun", visitors: 40 },
],
xName: "month",
yName: "visitors"
}
]
});
chart.appendTo("#container");
Step-4: Customizing horizontal bar chart
Adding Chart Title
Add title to the chart, to provide quick information about the data plotted in the chart.
var chart = new ej.charts.Chart({
title: ' Library Visitors Summary'
});
chart.appendTo('#container');
Adding data label
You can add data labels to improve the readability of the chart. This can be achieved by setting the visible property to true in the dataLabel object.
var chart = new ej.charts.Chart({
series: [
{
marker: {
dataLabel: { visible: true }
}
}
],
});
chart.appendTo('#container');
Adding Tooltip
The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the enable property as true in tooltip object.
var chart = new ej.charts.Chart({
tooltip: { enable: true},
});
chart.appendTo('#container');
Changing the color of the bar chart
Customize the look and feel of the bar using fill property.
var chart = new ej.charts.Chart({
series: [
{
fill: “#cc99ff”
}
],
});
chart.appendTo('#container');
Customizing the border
Customize the border color and width using the border property in series.
var chart = new ej.charts.Chart({
series: [
{
border: {
color: 'black',
width: 4
},
}
],
});
chart.appendTo('#container');
Applying various colors to the bar chart
Every data point in the bar chart can be given the specific color which helps to easily identify and compare the data points. You can give the color of each data point in the data source, and then bind the color with pointColorMapping property.
var chart = new ej.charts.Chart({
series: [
{
type: "Bar",
dataSource: [
{ month: "Jan", visitors: 50, color: '#c6e2b6' },
{ month: "Feb", visitors: 57, color: '#99c4ff' },
{ month: "Mar", visitors: 48, color: '#a4f4d9' },
{ month: "Apr", visitors: 60, color: '#99fffb' },
{ month: "May", visitors: 70, color: '#ffaf99' },
{ month: "Jun", visitors: 40, color: '#ff99b0' }
],
xName: "month",
yName: "visitors",
pointColorMapping: 'color',
}
]
});
chart.appendTo("#container");
