Barchart formatting in JSON/Column formatting

Question

I am working on JSON/column formatting. I want to show column data in barchart format.

(e.g. In below image Progress is the column name and 100/75/50/25 are four different items.)

I know we can create progress bar. But I do not know if it is possible to show data in bar chart format. If yes, then please suggest me on this.

Thanks in advance.

Answer 1

Thankyou for clarifications. I created a simple solution for column formatting. You can improve in CSS part, while I am using old school CSS to render the bar graphs. Below example have four bars, each representing 25% completion.

Use the below link to see code on Github Gist. https://gist.github.com/thinkb4code/0e11bb6c3a00555484260905a0d1198a

There are two files in it.

1. bar-graph.html This is the basic HTML I used to render bar graph. For me column formatting start with basic HTML concept. First identify the design and then convert it to JSON schema.
2. bar.graph.json This is the actual JSON schema we need to put as column formatting.

Here is the reference video for you, how this looks.

Answer 2

If you want to create a horizontal bar inside your number column then try below code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField + '%'",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "width": "=if(@currentField >= 100, '100%', @currentField + '%')"
  }
}

Reference: Create simple data visualizations.