Overview
Implementation Changing the bar colours
javascript tables

MFColumnDataBar

MFColumnDataBar is a simple javaScript class that will add a data-bar to your html table cell based on a percentage value you provide, similar to that seen in Excel Conditional Formatting Data Bars.

Implementation

To implement, simply include the .js and .css files

html
<script src='https://methodfish.com/Download/MFColumnDataBar/files/latest/js/mf-column-databar.js'></script>
<link rel='stylesheet preload prefetch' as='style' href='https://www.methodfish.com/Download/MFColumnDataBar/files/latest/css/mf-column-databar.css'>

Have a table on your webpage:

Cat %
A 50
B 25
C 13
D 12

then call the following javaScript to tell the class to add bars....

js
window.addEventListener('load',function() {
    const cdb = new MfColumnDataBar();
        
    document.querySelectorAll('td').forEach(cell => {
            cdb.setColumnDataBar(cell, parseFloat(cell.innerText));
        });
});

Resulting in

Cat %
A 50
B 25
C 13
D 12


Changing the bar colours

To change the colour of the bar, simply add a css for .mf-column-databar:

css
.mf-column-databar {
    background-color:red;
    opacity:0.3;
}

See https://jsfiddle.net for an editable demo.


link Click to view a demo

square

About

License

Latest Release

Version 1.07 weeks ago