SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Bubble Chart Column Formatting

This sample demonstrates how to use SharePoint Column Formatting to generate a dynamic bubble chart for list items.

Get this format View on GitHub

Shared by Sai Bandaru
Updated Sep 2, 2025

Bubble Chart Screenshot
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-wrap": "wrap",
    "gap": "8px",
    "padding": "6px",
    "flex-direction": "column"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-wrap": "wrap",
        "gap": "8px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL1]+'@','@')>25,'120px',if(indexOf([$LABEL1]+'@','@')>20,'100px',if(indexOf([$LABEL1]+'@','@')>17,'90px',if(indexOf([$LABEL1]+'@','@')>15,'80px',if(indexOf([$LABEL1]+'@','@')>11,'70px',if(indexOf([$LABEL1]+'@','@')>9,'60px',if(indexOf([$LABEL1]+'@','@')>6,'50px',if(indexOf([$LABEL1]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL1]+'@','@')>25,'120px',if(indexOf([$LABEL1]+'@','@')>20,'100px',if(indexOf([$LABEL1]+'@','@')>17,'90px',if(indexOf([$LABEL1]+'@','@')>15,'80px',if(indexOf([$LABEL1]+'@','@')>11,'70px',if(indexOf([$LABEL1]+'@','@')>9,'60px',if(indexOf([$LABEL1]+'@','@')>6,'50px',if(indexOf([$LABEL1]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL1]+'@','@')>25,'#448aff',if(indexOf([$LABEL1]+'@','@')>20,'#e91e63',if(indexOf([$LABEL1]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL1]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL1]+'@','@')>11,'#2196f3',if(indexOf([$LABEL1]+'@','@')>9,'#009688',if(indexOf([$LABEL1]+'@','@')>6,'#4caf50',if(indexOf([$LABEL1]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL1]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL2]+'@','@')>25,'120px',if(indexOf([$LABEL2]+'@','@')>20,'100px',if(indexOf([$LABEL2]+'@','@')>17,'90px',if(indexOf([$LABEL2]+'@','@')>15,'80px',if(indexOf([$LABEL2]+'@','@')>11,'70px',if(indexOf([$LABEL2]+'@','@')>9,'60px',if(indexOf([$LABEL2]+'@','@')>6,'50px',if(indexOf([$LABEL2]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL2]+'@','@')>25,'120px',if(indexOf([$LABEL2]+'@','@')>20,'100px',if(indexOf([$LABEL2]+'@','@')>17,'90px',if(indexOf([$LABEL2]+'@','@')>15,'80px',if(indexOf([$LABEL2]+'@','@')>11,'70px',if(indexOf([$LABEL2]+'@','@')>9,'60px',if(indexOf([$LABEL2]+'@','@')>6,'50px',if(indexOf([$LABEL2]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL2]+'@','@')>25,'#448aff',if(indexOf([$LABEL2]+'@','@')>20,'#e91e63',if(indexOf([$LABEL2]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL2]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL2]+'@','@')>11,'#2196f3',if(indexOf([$LABEL2]+'@','@')>9,'#009688',if(indexOf([$LABEL2]+'@','@')>6,'#4caf50',if(indexOf([$LABEL2]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL2]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL3]+'@','@')>25,'120px',if(indexOf([$LABEL3]+'@','@')>20,'100px',if(indexOf([$LABEL3]+'@','@')>17,'90px',if(indexOf([$LABEL3]+'@','@')>15,'80px',if(indexOf([$LABEL3]+'@','@')>11,'70px',if(indexOf([$LABEL3]+'@','@')>9,'60px',if(indexOf([$LABEL3]+'@','@')>6,'50px',if(indexOf([$LABEL3]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL3]+'@','@')>25,'120px',if(indexOf([$LABEL3]+'@','@')>20,'100px',if(indexOf([$LABEL3]+'@','@')>17,'90px',if(indexOf([$LABEL3]+'@','@')>15,'80px',if(indexOf([$LABEL3]+'@','@')>11,'70px',if(indexOf([$LABEL3]+'@','@')>9,'60px',if(indexOf([$LABEL3]+'@','@')>6,'50px',if(indexOf([$LABEL3]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL3]+'@','@')>25,'#448aff',if(indexOf([$LABEL3]+'@','@')>20,'#e91e63',if(indexOf([$LABEL3]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL3]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL3]+'@','@')>11,'#2196f3',if(indexOf([$LABEL3]+'@','@')>9,'#009688',if(indexOf([$LABEL3]+'@','@')>6,'#4caf50',if(indexOf([$LABEL3]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL3]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL4]+'@','@')>25,'120px',if(indexOf([$LABEL4]+'@','@')>20,'100px',if(indexOf([$LABEL4]+'@','@')>17,'90px',if(indexOf([$LABEL4]+'@','@')>15,'80px',if(indexOf([$LABEL4]+'@','@')>11,'70px',if(indexOf([$LABEL4]+'@','@')>9,'60px',if(indexOf([$LABEL4]+'@','@')>6,'50px',if(indexOf([$LABEL4]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL4]+'@','@')>25,'120px',if(indexOf([$LABEL4]+'@','@')>20,'100px',if(indexOf([$LABEL4]+'@','@')>17,'90px',if(indexOf([$LABEL4]+'@','@')>15,'80px',if(indexOf([$LABEL4]+'@','@')>11,'70px',if(indexOf([$LABEL4]+'@','@')>9,'60px',if(indexOf([$LABEL4]+'@','@')>6,'50px',if(indexOf([$LABEL4]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL4]+'@','@')>25,'#448aff',if(indexOf([$LABEL4]+'@','@')>20,'#e91e63',if(indexOf([$LABEL4]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL4]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL4]+'@','@')>11,'#2196f3',if(indexOf([$LABEL4]+'@','@')>9,'#009688',if(indexOf([$LABEL4]+'@','@')>6,'#4caf50',if(indexOf([$LABEL4]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL4]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL5]+'@','@')>25,'120px',if(indexOf([$LABEL5]+'@','@')>20,'100px',if(indexOf([$LABEL5]+'@','@')>17,'90px',if(indexOf([$LABEL5]+'@','@')>15,'80px',if(indexOf([$LABEL5]+'@','@')>11,'70px',if(indexOf([$LABEL5]+'@','@')>9,'60px',if(indexOf([$LABEL5]+'@','@')>6,'50px',if(indexOf([$LABEL5]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL5]+'@','@')>25,'120px',if(indexOf([$LABEL5]+'@','@')>20,'100px',if(indexOf([$LABEL5]+'@','@')>17,'90px',if(indexOf([$LABEL5]+'@','@')>15,'80px',if(indexOf([$LABEL5]+'@','@')>11,'70px',if(indexOf([$LABEL5]+'@','@')>9,'60px',if(indexOf([$LABEL5]+'@','@')>6,'50px',if(indexOf([$LABEL5]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL5]+'@','@')>25,'#448aff',if(indexOf([$LABEL5]+'@','@')>20,'#e91e63',if(indexOf([$LABEL5]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL5]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL5]+'@','@')>11,'#2196f3',if(indexOf([$LABEL5]+'@','@')>9,'#009688',if(indexOf([$LABEL5]+'@','@')>6,'#4caf50',if(indexOf([$LABEL5]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL5]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL6]+'@','@')>25,'120px',if(indexOf([$LABEL6]+'@','@')>20,'100px',if(indexOf([$LABEL6]+'@','@')>17,'90px',if(indexOf([$LABEL6]+'@','@')>15,'80px',if(indexOf([$LABEL6]+'@','@')>11,'70px',if(indexOf([$LABEL6]+'@','@')>9,'60px',if(indexOf([$LABEL6]+'@','@')>6,'50px',if(indexOf([$LABEL6]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL6]+'@','@')>25,'120px',if(indexOf([$LABEL6]+'@','@')>20,'100px',if(indexOf([$LABEL6]+'@','@')>17,'90px',if(indexOf([$LABEL6]+'@','@')>15,'80px',if(indexOf([$LABEL6]+'@','@')>11,'70px',if(indexOf([$LABEL6]+'@','@')>9,'60px',if(indexOf([$LABEL6]+'@','@')>6,'50px',if(indexOf([$LABEL6]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL6]+'@','@')>25,'#448aff',if(indexOf([$LABEL6]+'@','@')>20,'#e91e63',if(indexOf([$LABEL6]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL6]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL6]+'@','@')>11,'#2196f3',if(indexOf([$LABEL6]+'@','@')>9,'#009688',if(indexOf([$LABEL6]+'@','@')>6,'#4caf50',if(indexOf([$LABEL6]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL6]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL7]+'@','@')>25,'120px',if(indexOf([$LABEL7]+'@','@')>20,'100px',if(indexOf([$LABEL7]+'@','@')>17,'90px',if(indexOf([$LABEL7]+'@','@')>15,'80px',if(indexOf([$LABEL7]+'@','@')>11,'70px',if(indexOf([$LABEL7]+'@','@')>9,'60px',if(indexOf([$LABEL7]+'@','@')>6,'50px',if(indexOf([$LABEL7]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL7]+'@','@')>25,'120px',if(indexOf([$LABEL7]+'@','@')>20,'100px',if(indexOf([$LABEL7]+'@','@')>17,'90px',if(indexOf([$LABEL7]+'@','@')>15,'80px',if(indexOf([$LABEL7]+'@','@')>11,'70px',if(indexOf([$LABEL7]+'@','@')>9,'60px',if(indexOf([$LABEL7]+'@','@')>6,'50px',if(indexOf([$LABEL7]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL7]+'@','@')>25,'#448aff',if(indexOf([$LABEL7]+'@','@')>20,'#e91e63',if(indexOf([$LABEL7]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL7]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL7]+'@','@')>11,'#2196f3',if(indexOf([$LABEL7]+'@','@')>9,'#009688',if(indexOf([$LABEL7]+'@','@')>6,'#4caf50',if(indexOf([$LABEL7]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL7]"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-wrap": "wrap",
        "gap": "8px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL8]+'@','@')>25,'120px',if(indexOf([$LABEL8]+'@','@')>20,'100px',if(indexOf([$LABEL8]+'@','@')>17,'90px',if(indexOf([$LABEL8]+'@','@')>15,'80px',if(indexOf([$LABEL8]+'@','@')>11,'70px',if(indexOf([$LABEL8]+'@','@')>9,'60px',if(indexOf([$LABEL8]+'@','@')>6,'50px',if(indexOf([$LABEL8]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL8]+'@','@')>25,'120px',if(indexOf([$LABEL8]+'@','@')>20,'100px',if(indexOf([$LABEL8]+'@','@')>17,'90px',if(indexOf([$LABEL8]+'@','@')>15,'80px',if(indexOf([$LABEL8]+'@','@')>11,'70px',if(indexOf([$LABEL8]+'@','@')>9,'60px',if(indexOf([$LABEL8]+'@','@')>6,'50px',if(indexOf([$LABEL8]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL8]+'@','@')>25,'#448aff',if(indexOf([$LABEL8]+'@','@')>20,'#e91e63',if(indexOf([$LABEL8]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL8]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL8]+'@','@')>11,'#2196f3',if(indexOf([$LABEL8]+'@','@')>9,'#009688',if(indexOf([$LABEL8]+'@','@')>6,'#4caf50',if(indexOf([$LABEL8]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL8]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL9]+'@','@')>25,'120px',if(indexOf([$LABEL9]+'@','@')>20,'100px',if(indexOf([$LABEL9]+'@','@')>17,'90px',if(indexOf([$LABEL9]+'@','@')>15,'80px',if(indexOf([$LABEL9]+'@','@')>11,'70px',if(indexOf([$LABEL9]+'@','@')>9,'60px',if(indexOf([$LABEL9]+'@','@')>6,'50px',if(indexOf([$LABEL9]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL9]+'@','@')>25,'120px',if(indexOf([$LABEL9]+'@','@')>20,'100px',if(indexOf([$LABEL9]+'@','@')>17,'90px',if(indexOf([$LABEL9]+'@','@')>15,'80px',if(indexOf([$LABEL9]+'@','@')>11,'70px',if(indexOf([$LABEL9]+'@','@')>9,'60px',if(indexOf([$LABEL9]+'@','@')>6,'50px',if(indexOf([$LABEL9]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL9]+'@','@')>25,'#448aff',if(indexOf([$LABEL9]+'@','@')>20,'#e91e63',if(indexOf([$LABEL9]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL9]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL9]+'@','@')>11,'#2196f3',if(indexOf([$LABEL9]+'@','@')>9,'#009688',if(indexOf([$LABEL9]+'@','@')>6,'#4caf50',if(indexOf([$LABEL9]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL9]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL10]+'@','@')>25,'120px',if(indexOf([$LABEL10]+'@','@')>20,'100px',if(indexOf([$LABEL10]+'@','@')>17,'90px',if(indexOf([$LABEL10]+'@','@')>15,'80px',if(indexOf([$LABEL10]+'@','@')>11,'70px',if(indexOf([$LABEL10]+'@','@')>9,'60px',if(indexOf([$LABEL10]+'@','@')>6,'50px',if(indexOf([$LABEL10]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL10]+'@','@')>25,'120px',if(indexOf([$LABEL10]+'@','@')>20,'100px',if(indexOf([$LABEL10]+'@','@')>17,'90px',if(indexOf([$LABEL10]+'@','@')>15,'80px',if(indexOf([$LABEL10]+'@','@')>11,'70px',if(indexOf([$LABEL10]+'@','@')>9,'60px',if(indexOf([$LABEL10]+'@','@')>6,'50px',if(indexOf([$LABEL10]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL10]+'@','@')>25,'#448aff',if(indexOf([$LABEL10]+'@','@')>20,'#e91e63',if(indexOf([$LABEL10]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL10]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL10]+'@','@')>11,'#2196f3',if(indexOf([$LABEL10]+'@','@')>9,'#009688',if(indexOf([$LABEL10]+'@','@')>6,'#4caf50',if(indexOf([$LABEL10]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL10]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL11]+'@','@')>25,'120px',if(indexOf([$LABEL11]+'@','@')>20,'100px',if(indexOf([$LABEL11]+'@','@')>17,'90px',if(indexOf([$LABEL11]+'@','@')>15,'80px',if(indexOf([$LABEL11]+'@','@')>11,'70px',if(indexOf([$LABEL11]+'@','@')>9,'60px',if(indexOf([$LABEL11]+'@','@')>6,'50px',if(indexOf([$LABEL11]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL11]+'@','@')>25,'120px',if(indexOf([$LABEL11]+'@','@')>20,'100px',if(indexOf([$LABEL11]+'@','@')>17,'90px',if(indexOf([$LABEL11]+'@','@')>15,'80px',if(indexOf([$LABEL11]+'@','@')>11,'70px',if(indexOf([$LABEL11]+'@','@')>9,'60px',if(indexOf([$LABEL11]+'@','@')>6,'50px',if(indexOf([$LABEL11]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL11]+'@','@')>25,'#448aff',if(indexOf([$LABEL11]+'@','@')>20,'#e91e63',if(indexOf([$LABEL11]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL11]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL11]+'@','@')>11,'#2196f3',if(indexOf([$LABEL11]+'@','@')>9,'#009688',if(indexOf([$LABEL11]+'@','@')>6,'#4caf50',if(indexOf([$LABEL11]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL11]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL12]+'@','@')>25,'120px',if(indexOf([$LABEL12]+'@','@')>20,'100px',if(indexOf([$LABEL12]+'@','@')>17,'90px',if(indexOf([$LABEL12]+'@','@')>15,'80px',if(indexOf([$LABEL12]+'@','@')>11,'70px',if(indexOf([$LABEL12]+'@','@')>9,'60px',if(indexOf([$LABEL12]+'@','@')>6,'50px',if(indexOf([$LABEL12]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL12]+'@','@')>25,'120px',if(indexOf([$LABEL12]+'@','@')>20,'100px',if(indexOf([$LABEL12]+'@','@')>17,'90px',if(indexOf([$LABEL12]+'@','@')>15,'80px',if(indexOf([$LABEL12]+'@','@')>11,'70px',if(indexOf([$LABEL12]+'@','@')>9,'60px',if(indexOf([$LABEL12]+'@','@')>6,'50px',if(indexOf([$LABEL12]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL12]+'@','@')>25,'#448aff',if(indexOf([$LABEL12]+'@','@')>20,'#e91e63',if(indexOf([$LABEL12]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL12]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL12]+'@','@')>11,'#2196f3',if(indexOf([$LABEL12]+'@','@')>9,'#009688',if(indexOf([$LABEL12]+'@','@')>6,'#4caf50',if(indexOf([$LABEL12]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL12]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL13]+'@','@')>25,'120px',if(indexOf([$LABEL13]+'@','@')>20,'100px',if(indexOf([$LABEL13]+'@','@')>17,'90px',if(indexOf([$LABEL13]+'@','@')>15,'80px',if(indexOf([$LABEL13]+'@','@')>11,'70px',if(indexOf([$LABEL13]+'@','@')>9,'60px',if(indexOf([$LABEL13]+'@','@')>6,'50px',if(indexOf([$LABEL13]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL13]+'@','@')>25,'120px',if(indexOf([$LABEL13]+'@','@')>20,'100px',if(indexOf([$LABEL13]+'@','@')>17,'90px',if(indexOf([$LABEL13]+'@','@')>15,'80px',if(indexOf([$LABEL13]+'@','@')>11,'70px',if(indexOf([$LABEL13]+'@','@')>9,'60px',if(indexOf([$LABEL13]+'@','@')>6,'50px',if(indexOf([$LABEL13]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL13]+'@','@')>25,'#448aff',if(indexOf([$LABEL13]+'@','@')>20,'#e91e63',if(indexOf([$LABEL13]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL13]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL13]+'@','@')>11,'#2196f3',if(indexOf([$LABEL13]+'@','@')>9,'#009688',if(indexOf([$LABEL13]+'@','@')>6,'#4caf50',if(indexOf([$LABEL13]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL13]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL14]+'@','@')>25,'120px',if(indexOf([$LABEL14]+'@','@')>20,'100px',if(indexOf([$LABEL14]+'@','@')>17,'90px',if(indexOf([$LABEL14]+'@','@')>15,'80px',if(indexOf([$LABEL14]+'@','@')>11,'70px',if(indexOf([$LABEL14]+'@','@')>9,'60px',if(indexOf([$LABEL14]+'@','@')>6,'50px',if(indexOf([$LABEL14]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL14]+'@','@')>25,'120px',if(indexOf([$LABEL14]+'@','@')>20,'100px',if(indexOf([$LABEL14]+'@','@')>17,'90px',if(indexOf([$LABEL14]+'@','@')>15,'80px',if(indexOf([$LABEL14]+'@','@')>11,'70px',if(indexOf([$LABEL14]+'@','@')>9,'60px',if(indexOf([$LABEL14]+'@','@')>6,'50px',if(indexOf([$LABEL14]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL14]+'@','@')>25,'#448aff',if(indexOf([$LABEL14]+'@','@')>20,'#e91e63',if(indexOf([$LABEL14]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL14]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL14]+'@','@')>11,'#2196f3',if(indexOf([$LABEL14]+'@','@')>9,'#009688',if(indexOf([$LABEL14]+'@','@')>6,'#4caf50',if(indexOf([$LABEL14]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL14]"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-wrap": "wrap",
        "gap": "8px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL15]+'@','@')>25,'120px',if(indexOf([$LABEL15]+'@','@')>20,'100px',if(indexOf([$LABEL15]+'@','@')>17,'90px',if(indexOf([$LABEL15]+'@','@')>15,'80px',if(indexOf([$LABEL15]+'@','@')>11,'70px',if(indexOf([$LABEL15]+'@','@')>9,'60px',if(indexOf([$LABEL15]+'@','@')>6,'50px',if(indexOf([$LABEL15]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL15]+'@','@')>25,'120px',if(indexOf([$LABEL15]+'@','@')>20,'100px',if(indexOf([$LABEL15]+'@','@')>17,'90px',if(indexOf([$LABEL15]+'@','@')>15,'80px',if(indexOf([$LABEL15]+'@','@')>11,'70px',if(indexOf([$LABEL15]+'@','@')>9,'60px',if(indexOf([$LABEL15]+'@','@')>6,'50px',if(indexOf([$LABEL15]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL15]+'@','@')>25,'#448aff',if(indexOf([$LABEL15]+'@','@')>20,'#e91e63',if(indexOf([$LABEL15]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL15]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL15]+'@','@')>11,'#2196f3',if(indexOf([$LABEL15]+'@','@')>9,'#009688',if(indexOf([$LABEL15]+'@','@')>6,'#4caf50',if(indexOf([$LABEL15]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL15]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL16]+'@','@')>25,'120px',if(indexOf([$LABEL16]+'@','@')>20,'100px',if(indexOf([$LABEL16]+'@','@')>17,'90px',if(indexOf([$LABEL16]+'@','@')>15,'80px',if(indexOf([$LABEL16]+'@','@')>11,'70px',if(indexOf([$LABEL16]+'@','@')>9,'60px',if(indexOf([$LABEL16]+'@','@')>6,'50px',if(indexOf([$LABEL16]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL16]+'@','@')>25,'120px',if(indexOf([$LABEL16]+'@','@')>20,'100px',if(indexOf([$LABEL16]+'@','@')>17,'90px',if(indexOf([$LABEL16]+'@','@')>15,'80px',if(indexOf([$LABEL16]+'@','@')>11,'70px',if(indexOf([$LABEL16]+'@','@')>9,'60px',if(indexOf([$LABEL16]+'@','@')>6,'50px',if(indexOf([$LABEL16]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL16]+'@','@')>25,'#448aff',if(indexOf([$LABEL16]+'@','@')>20,'#e91e63',if(indexOf([$LABEL16]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL16]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL16]+'@','@')>11,'#2196f3',if(indexOf([$LABEL16]+'@','@')>9,'#009688',if(indexOf([$LABEL16]+'@','@')>6,'#4caf50',if(indexOf([$LABEL16]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL16]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL17]+'@','@')>25,'120px',if(indexOf([$LABEL17]+'@','@')>20,'100px',if(indexOf([$LABEL17]+'@','@')>17,'90px',if(indexOf([$LABEL17]+'@','@')>15,'80px',if(indexOf([$LABEL17]+'@','@')>11,'70px',if(indexOf([$LABEL17]+'@','@')>9,'60px',if(indexOf([$LABEL17]+'@','@')>6,'50px',if(indexOf([$LABEL17]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL17]+'@','@')>25,'120px',if(indexOf([$LABEL17]+'@','@')>20,'100px',if(indexOf([$LABEL17]+'@','@')>17,'90px',if(indexOf([$LABEL17]+'@','@')>15,'80px',if(indexOf([$LABEL17]+'@','@')>11,'70px',if(indexOf([$LABEL17]+'@','@')>9,'60px',if(indexOf([$LABEL17]+'@','@')>6,'50px',if(indexOf([$LABEL17]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL17]+'@','@')>25,'#448aff',if(indexOf([$LABEL17]+'@','@')>20,'#e91e63',if(indexOf([$LABEL17]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL17]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL17]+'@','@')>11,'#2196f3',if(indexOf([$LABEL17]+'@','@')>9,'#009688',if(indexOf([$LABEL17]+'@','@')>6,'#4caf50',if(indexOf([$LABEL17]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL17]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL18]+'@','@')>25,'120px',if(indexOf([$LABEL18]+'@','@')>20,'100px',if(indexOf([$LABEL18]+'@','@')>17,'90px',if(indexOf([$LABEL18]+'@','@')>15,'80px',if(indexOf([$LABEL18]+'@','@')>11,'70px',if(indexOf([$LABEL18]+'@','@')>9,'60px',if(indexOf([$LABEL18]+'@','@')>6,'50px',if(indexOf([$LABEL18]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL18]+'@','@')>25,'120px',if(indexOf([$LABEL18]+'@','@')>20,'100px',if(indexOf([$LABEL18]+'@','@')>17,'90px',if(indexOf([$LABEL18]+'@','@')>15,'80px',if(indexOf([$LABEL18]+'@','@')>11,'70px',if(indexOf([$LABEL18]+'@','@')>9,'60px',if(indexOf([$LABEL18]+'@','@')>6,'50px',if(indexOf([$LABEL18]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL18]+'@','@')>25,'#448aff',if(indexOf([$LABEL18]+'@','@')>20,'#e91e63',if(indexOf([$LABEL18]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL18]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL18]+'@','@')>11,'#2196f3',if(indexOf([$LABEL18]+'@','@')>9,'#009688',if(indexOf([$LABEL18]+'@','@')>6,'#4caf50',if(indexOf([$LABEL18]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL18]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL19]+'@','@')>25,'120px',if(indexOf([$LABEL19]+'@','@')>20,'100px',if(indexOf([$LABEL19]+'@','@')>17,'90px',if(indexOf([$LABEL19]+'@','@')>15,'80px',if(indexOf([$LABEL19]+'@','@')>11,'70px',if(indexOf([$LABEL19]+'@','@')>9,'60px',if(indexOf([$LABEL19]+'@','@')>6,'50px',if(indexOf([$LABEL19]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL19]+'@','@')>25,'120px',if(indexOf([$LABEL19]+'@','@')>20,'100px',if(indexOf([$LABEL19]+'@','@')>17,'90px',if(indexOf([$LABEL19]+'@','@')>15,'80px',if(indexOf([$LABEL19]+'@','@')>11,'70px',if(indexOf([$LABEL19]+'@','@')>9,'60px',if(indexOf([$LABEL19]+'@','@')>6,'50px',if(indexOf([$LABEL19]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL19]+'@','@')>25,'#448aff',if(indexOf([$LABEL19]+'@','@')>20,'#e91e63',if(indexOf([$LABEL19]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL19]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL19]+'@','@')>11,'#2196f3',if(indexOf([$LABEL19]+'@','@')>9,'#009688',if(indexOf([$LABEL19]+'@','@')>6,'#4caf50',if(indexOf([$LABEL19]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL19]"
        },
        {
          "elmType": "div",
          "style": {
            "width": "=if(indexOf([$LABEL20]+'@','@')>25,'120px',if(indexOf([$LABEL20]+'@','@')>20,'100px',if(indexOf([$LABEL20]+'@','@')>17,'90px',if(indexOf([$LABEL20]+'@','@')>15,'80px',if(indexOf([$LABEL20]+'@','@')>11,'70px',if(indexOf([$LABEL20]+'@','@')>9,'60px',if(indexOf([$LABEL20]+'@','@')>6,'50px',if(indexOf([$LABEL20]+'@','@')>3,'40px','30px'))))))))",
            "height": "=if(indexOf([$LABEL20]+'@','@')>25,'120px',if(indexOf([$LABEL20]+'@','@')>20,'100px',if(indexOf([$LABEL20]+'@','@')>17,'90px',if(indexOf([$LABEL20]+'@','@')>15,'80px',if(indexOf([$LABEL20]+'@','@')>11,'70px',if(indexOf([$LABEL20]+'@','@')>9,'60px',if(indexOf([$LABEL20]+'@','@')>6,'50px',if(indexOf([$LABEL20]+'@','@')>3,'40px','30px'))))))))",
            "border-radius": "50%",
            "background-color": "=if(indexOf([$LABEL20]+'@','@')>25,'#448aff',if(indexOf([$LABEL20]+'@','@')>20,'#e91e63',if(indexOf([$LABEL20]+'@','@')>17,'#9c27b0',if(indexOf([$LABEL20]+'@','@')>15,'#3f51b5',if(indexOf([$LABEL20]+'@','@')>11,'#2196f3',if(indexOf([$LABEL20]+'@','@')>9,'#009688',if(indexOf([$LABEL20]+'@','@')>6,'#4caf50',if(indexOf([$LABEL20]+'@','@')>3,'#ff9800','#795548'))))))))",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "color": "#fff",
            "font-weight": "bold",
            "text-align": "center"
          },
          "txtContent": "[$LABEL20]"
        }
      ]
    }
  ]
}
View sourceLink to this definitiongeneric-bubble-chart.json

From the contributor

How to use this sample

This sample demonstrates how to use SharePoint Column Formatting to create a dynamic bubble chart in a list view. The size and color of each bubble are automatically determined by the length of the text in its corresponding column, providing a quick visual representation of your data.

screenshot of the sample

Summary

  • The bubble size and color are dynamically generated.
  • A wider range of sizes and colors is supported for a more vibrant appearance.
  • The bubbles are arranged into a multi-line layout to prevent horizontal crowding.
  • The text within each bubble is horizontally and vertically centered, even when it wraps to multiple lines.

View Requirements

Create a SharePoint list with the following columns:

Column Name Type
Title Single Line of Text
LABEL1 Single Line of Text
LABEL2 Single Line of Text
LABEL3 Single Line of Text
LABEL4 Single Line of Text
LABEL5 Single Line of Text
LABEL6 Single Line of Text
LABEL7 Single Line of Text
LABEL8 Single Line of Text
LABEL9 Single Line of Text
LABEL10 Single Line of Text
LABEL11 Single Line of Text
LABEL12 Single Line of Text
LABEL13 Single Line of Text
LABEL14 Single Line of Text
LABEL15 Single Line of Text
LABEL16 Single Line of Text
LABEL17 Single Line of Text
LABEL18 Single Line of Text
LABEL19 Single Line of Text
LABEL20 Single Line of Text

The formatting code will apply to the column containing the JSON and reference these other columns to create the complete visual.

How to Apply

  1. Open your SharePoint list.
  2. Click the column header you want to format → Column settings → Format this column.
  3. Switch to Advanced mode.
  4. Paste the JSON provided in this project into the formatting editor.
  5. Click Save. The column will render as a word cloud automatically.

How It Works

The bubble chart is created using a single JSON file that applies to a column in your SharePoint list. The key parts of the code are:

  • Dynamic Sizing: The width and height of each bubble are set using nested if statements that evaluate the length of the text in the corresponding LABEL column. This creates a range of sizes, from a small 30px bubble to a large 120px bubble.
  • Conditional Coloring: The background-color property is also controlled by the text length, with a different color assigned to each size range.
  • Multi-line Layout: The bubbles are grouped into separate div elements to force them to wrap onto multiple lines, creating a clean, organized layout.

Sample

Solution Author(s)
generic-bubble-chart.json Sai Bandaru

Version History

Version Date Comments
1.0 September 2, 2025 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional Notes

  • You can easily customize the bubble sizes, colors, and the number of rows by editing the JSON code.

References