Horizontal Bar Chart in AngularJS using ChartJS

Posted on Updated on

A set of data are better understood when represented graphically, there are various ways to represent data, out which Horizontal Bar Chart is one of them. The chart can be implemented using AngularJS.

AngularJS uses Chart.js as a dependency to create given chart, which imparts responsiveness and provides various other flexibility, which we’ll see them going further. Other implementation of Chart are

  1. Pie Chart
  2. Doughnut Chart
  3. Bar Chart
  4. Line Chart

Environment Set:

Dependencies:

  1. angular.min.js
  2. angular-chart.min.js
  3. chart.js

These files need to be included in page as-

After including the files in page, one must add chart.js in module dependency, as shown below

Directives of AngularJS charts:

Directive Description
chart-data series data
chart-labels series labels
chart-options (default: {}): Chart.js options
chart-click (optional): onclick event handler
chart-hover (optional): onmousemove event handler
chart-colors (default to global colors): colors for the chart
chart-dataset-override (optional): override datasets individually

Implementation of Horizontal Bar Chart:

Let’s see the implementation of Horizontal Bar Chart:

index.html

chartController.js (with two data sets)

Output with double data sets:

horizontalbarchartdoubledataset

chartController.js (with single data set)

Output with single data set:

horizontalbarchartsingledataset

We can clearly see how a Horizontal Bar chart is rendered with single and double data sets. Depending upon requirement we can make successive changes. There are few thing one should keep note while making changes

  • chart-colors: This directive is not mandatory, when removed a color is automatically assigned to each section. However if used then one need to ensure to use only color code but not names.

Stay tuned for more updates!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.