Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bar graph using SharePoint column formatting
<!-- 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>
{
"$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"
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.