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.

enter image description here

  • Do you want to create a horizontal bar? As given in example at: docs.microsoft.com/en-us/sharepoint/dev/…. Let me know if this is what you are looking for. Feb 10, 2020 at 15:26
  • I am little bit unclear here. Are you trying to render single column value in a graph as shown above in screenshot, or there are multiple columns which you want to place is this graph. Also, can you use predefine icons/images like shown in above screenshot? Feb 10, 2020 at 18:50
  • @ThinkB4Code I am trying to render single column in a grapgh. And bars of this graph will be filled based on the column value (25/50/75/100). The image in my question is cropped from one of the document. I am new to JSON scripting so I am not sure if I can use it. Feb 11, 2020 at 7:02

1 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.

  • Thank you. I will try this and will let know. Feb 12, 2020 at 7:17
  • Thanks a lot. This solution really helped me :) Mar 13, 2020 at 7:26
  • 1
    You are welcome, sharing is caring :) Mar 16, 2020 at 17:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.