Bar graph using SharePoint column formatting

bar-graph.html

<!-- This HTML is converted to JSON schema for column formatting -->
<div style="position: relative; width: 37px; height: 26px; background-color: #aaa;">
    <!-- Div having color -->
    <div style="position: absolute; bottom: 0; left: 0; height: 6px; border: 1px solid #333; width: 8px; z-index: 10000;"></div>
    <div style="position: absolute; bottom: 0; left: 9px; height: 12px; border: 1px solid #333; width: 8px; z-index: 10000;"></div>
    <div style="position: absolute; bottom: 0; left: 18px; height: 18px; border: 1px solid #333; width: 8px; z-index: 10000;"></div>
    <div style="position: absolute; bottom: 0; left: 27px; height: 24px; border: 1px solid #333; width: 8px; z-index: 10000;"></div>
    <!-- Div not having color -->
    <div style="position: absolute; top: 0; left: 0; height: 18px; width: 9px; background-color: #fff; z-index: 10000;"></div>
    <div style="position: absolute; top: 0; left: 9px; height: 12px; width: 9px; background-color: #fff; z-index: 10000;"></div>
    <div style="position: absolute; top: 0; left: 18px; height: 6px; width: 9px; background-color: #fff; z-index: 10000;"></div>
    <!-- Color fill div -->
    <div style="position: absolute; top: 0; left: 0; height: 26px; background-color: #0a8baf; z-index: 999;"></div>
    <span>Value</span>
</div>

bar-graph.json

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "position": "relative",
        "width": "37px",
        "height": "26px",
        "background-color": "#fff",
        "max-height": "26px",
        "min-height": "26px",
        "margin": "5px 0"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "position": "absolute",
                "width": "8px",
                "height": "6px",
                "bottom": "0",
                "left": "0",
                "border": "1px solid #333",
                "z-index": "10000"
            }
        },
        {
            "elmType": "div",
            "style": {
                "position": "absolute",
                "width": "8px",
                "height": "12px",
                "bottom": "0",
                "left": "9px",
                "border": "1px solid #333",
                "z-index": "10000"
            }
        },
        {
            "elmType": "div",
            "style": {
                "position": "absolute",
                "width": "8px",
                "height": "18px",
                "bottom": "0",
                "left": "18px",
                "border": "1px solid #333",
                "z-index": "10000"
            }
        },
        {
            "elmType": "div",
            "style": {
                "position": "absolute",
                "width": "8px",
                "height": "24px",
                "bottom": "0",
                "left": "27px",
                "border": "1px solid #333",
                "z-index": "10000"
            }
        },
        {
            "elmType": "div",
            "style": {
                "position": "absolute",
                "width": "9px",
                "height": "18px",
                "top": "0",
                "left": "0",
                "background-color": "#fff",
                "z-index": "10000"
            }
        },
        {
            "elmType": "div",
            "style": {
                "position": "absolute",
                "width": "9px",
                "height": "12px",
                "top": "0",
                "left": "9px",
                "background-color": "#fff",
                "z-index": "10000"
            }
        },
        {
            "elmType": "div",
            "style": {
                "position": "absolute",
                "width": "9px",
                "height": "6px",
                "top": "0",
                "left": "18px",
                "background-color": "#fff",
                "z-index": "10000"
            }
        },
        {
            "elmType": "div",
            "style": {
                "position": "absolute",
                "width": "=@currentField + '%'",
                "height": "26px",
                "top": "0",
                "left": "0",
                "background-color": "#0a8baf",
                "z-index": "999"
            }
        },
        {
            "elmType": "span",
            "txtContent": "@currentField",
            "style": {
                "z-index": "100001",
                "position": "absolute",
                "left": "37px",
                "width": "40px",
                "margin": "5px 10px",
                "font-size": "1.3em"
            }
        }
    ]
}