Display percentage value as a bar

This data rendering helper method will convert percentage values into a bar. Values can either have the % sign or not and decimals get rounded to the given value. The percentage will have a max value of 100%.

This function should be used with the columns.render configuration option of DataTables.

v1.1 Changelog - Added a seventh border type parameter. - All parameters are now optional. - Improved styling. - Bug fix: Text is always centered now.

It accepts seven parameters:

  1. string square as default or round for a rounded bar.
  2. string A hex color for the text.
  3. string A hex color for the border.
  4. string A hex color for the bar.
  5. string A hex color for the background.
  6. integer A number used to round the value.
  7. string A border style, default=ridge (solid, outset, groove, ridge)



This plug-in can be obtained and used in multiple different ways.


This plug-in is available on the DataTables CDN:


The plug-in will then automatically register itself against a global DataTables instance. This file can also be used if you are using an AMD loader such as Require.js.

Note that if you are using multiple plug-ins, it can be beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.


The plug-ins are all available on NPM (which can also be used with Yarn or any other Javascript package manager) as part of the package. To use this plug-in, first install the plug-ins package:

npm install

ES modules

Then, if you are using ES modules, import, any other DataTables extensions you need, and the plug-in:

import DataTable from '';
import '';


If you are using a CommonJS loader for Node (e.g. with older versions of Webpack, or non-module Node code) use the following method to require the plug-in:

var $ = require('jquery');
var DataTable = require('');


// Display rounded bars with white text, medium blue border, light blue bar, dark blue background, rounded to one decimal.
  $('#example').DataTable( {
    columnDefs: [ {
      targets: 4,
      render: DataTable.render.percentBar( 'round','#FFF', '#269ABC', '#31B0D5', '#286090', 1, 'groove' )
    } ]
  } );
// All default values used. Square bars with black text, gray ridged border, light green bar, light gray background, rounded to integer.
  $('#example').DataTable( {
    columnDefs: [ {
      targets: 2,
      render: DataTable.render.percentBar()
    } ]
  } );

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!