SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Word Cloud Column Formatting

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

Get this format View on GitHub

Shared by Sai Bandaru
Updated Sep 2, 2025

Word Cloud 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": "6px",
    "padding": "6px"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "[$LABEL1]",
      "style": {
        "font-size": "=if(indexOf([$LABEL1]+'@','@')>15,'36px',if(indexOf([$LABEL1]+'@','@')>12,'30px',if(indexOf([$LABEL1]+'@','@')>9,'24px',if(indexOf([$LABEL1]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL1]+'@','@')>15,'#d32f2f',if(indexOf([$LABEL1]+'@','@')>12,'#1976d2',if(indexOf([$LABEL1]+'@','@')>9,'#388e3c',if(indexOf([$LABEL1]+'@','@')>7,'#f57c00','#7b1fa2'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL1]=='Sharing is Caring' || [$LABEL1]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL2]",
      "style": {
        "font-size": "=if(indexOf([$LABEL2]+'@','@')>15,'36px',if(indexOf([$LABEL2]+'@','@')>12,'30px',if(indexOf([$LABEL2]+'@','@')>9,'24px',if(indexOf([$LABEL2]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL2]+'@','@')>15,'#c62828',if(indexOf([$LABEL2]+'@','@')>12,'#1565c0',if(indexOf([$LABEL2]+'@','@')>9,'#2e7d32',if(indexOf([$LABEL2]+'@','@')>7,'#ef6c00','#6a1b9a'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL2]=='Sharing is Caring' || [$LABEL2]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL3]",
      "style": {
        "font-size": "=if(indexOf([$LABEL3]+'@','@')>15,'36px',if(indexOf([$LABEL3]+'@','@')>12,'30px',if(indexOf([$LABEL3]+'@','@')>9,'24px',if(indexOf([$LABEL3]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL3]+'@','@')>15,'#b71c1c',if(indexOf([$LABEL3]+'@','@')>12,'#0d47a1',if(indexOf([$LABEL3]+'@','@')>9,'#1b5e20',if(indexOf([$LABEL3]+'@','@')>7,'#e65100','#4a148c'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL3]=='Sharing is Caring' || [$LABEL3]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL4]",
      "style": {
        "font-size": "=if(indexOf([$LABEL4]+'@','@')>15,'36px',if(indexOf([$LABEL4]+'@','@')>12,'30px',if(indexOf([$LABEL4]+'@','@')>9,'24px',if(indexOf([$LABEL4]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL4]+'@','@')>15,'#d32f2f',if(indexOf([$LABEL4]+'@','@')>12,'#1976d2',if(indexOf([$LABEL4]+'@','@')>9,'#388e3c',if(indexOf([$LABEL4]+'@','@')>7,'#f57c00','#7b1fa2'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL4]=='Sharing is Caring' || [$LABEL4]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL5]",
      "style": {
        "font-size": "=if(indexOf([$LABEL5]+'@','@')>15,'36px',if(indexOf([$LABEL5]+'@','@')>12,'30px',if(indexOf([$LABEL5]+'@','@')>9,'24px',if(indexOf([$LABEL5]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL5]+'@','@')>15,'#c62828',if(indexOf([$LABEL5]+'@','@')>12,'#1565c0',if(indexOf([$LABEL5]+'@','@')>9,'#2e7d32',if(indexOf([$LABEL5]+'@','@')>7,'#ef6c00','#6a1b9a'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL5]=='Sharing is Caring' || [$LABEL5]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL6]",
      "style": {
        "font-size": "=if(indexOf([$LABEL6]+'@','@')>15,'36px',if(indexOf([$LABEL6]+'@','@')>12,'30px',if(indexOf([$LABEL6]+'@','@')>9,'24px',if(indexOf([$LABEL6]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL6]+'@','@')>15,'#b71c1c',if(indexOf([$LABEL6]+'@','@')>12,'#0d47a1',if(indexOf([$LABEL6]+'@','@')>9,'#1b5e20',if(indexOf([$LABEL6]+'@','@')>7,'#e65100','#4a148c'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL6]=='Sharing is Caring' || [$LABEL6]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL7]",
      "style": {
        "font-size": "=if(indexOf([$LABEL7]+'@','@')>15,'36px',if(indexOf([$LABEL7]+'@','@')>12,'30px',if(indexOf([$LABEL7]+'@','@')>9,'24px',if(indexOf([$LABEL7]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL7]+'@','@')>15,'#d32f2f',if(indexOf([$LABEL7]+'@','@')>12,'#1976d2',if(indexOf([$LABEL7]+'@','@')>9,'#388e3c',if(indexOf([$LABEL7]+'@','@')>7,'#f57c00','#7b1fa2'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL7]=='Sharing is Caring' || [$LABEL7]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL8]",
      "style": {
        "font-size": "=if(indexOf([$LABEL8]+'@','@')>15,'36px',if(indexOf([$LABEL8]+'@','@')>12,'30px',if(indexOf([$LABEL8]+'@','@')>9,'24px',if(indexOf([$LABEL8]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL8]+'@','@')>15,'#c62828',if(indexOf([$LABEL8]+'@','@')>12,'#1565c0',if(indexOf([$LABEL8]+'@','@')>9,'#2e7d32',if(indexOf([$LABEL8]+'@','@')>7,'#ef6c00','#6a1b9a'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL8]=='Sharing is Caring' || [$LABEL8]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL9]",
      "style": {
        "font-size": "=if(indexOf([$LABEL9]+'@','@')>15,'36px',if(indexOf([$LABEL9]+'@','@')>12,'30px',if(indexOf([$LABEL9]+'@','@')>9,'24px',if(indexOf([$LABEL9]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL9]+'@','@')>15,'#b71c1c',if(indexOf([$LABEL9]+'@','@')>12,'#0d47a1',if(indexOf([$LABEL9]+'@','@')>9,'#1b5e20',if(indexOf([$LABEL9]+'@','@')>7,'#e65100','#4a148c'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL9]=='Sharing is Caring' || [$LABEL9]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL10]",
      "style": {
        "font-size": "=if(indexOf([$LABEL10]+'@','@')>15,'36px',if(indexOf([$LABEL10]+'@','@')>12,'30px',if(indexOf([$LABEL10]+'@','@')>9,'24px',if(indexOf([$LABEL10]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL10]+'@','@')>15,'#d32f2f',if(indexOf([$LABEL10]+'@','@')>12,'#1976d2',if(indexOf([$LABEL10]+'@','@')>9,'#388e3c',if(indexOf([$LABEL10]+'@','@')>7,'#f57c00','#7b1fa2'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL10]=='Sharing is Caring' || [$LABEL10]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL11]",
      "style": {
        "font-size": "=if(indexOf([$LABEL11]+'@','@')>15,'36px',if(indexOf([$LABEL11]+'@','@')>12,'30px',if(indexOf([$LABEL11]+'@','@')>9,'24px',if(indexOf([$LABEL11]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL11]+'@','@')>15,'#c62828',if(indexOf([$LABEL11]+'@','@')>12,'#1565c0',if(indexOf([$LABEL11]+'@','@')>9,'#2e7d32',if(indexOf([$LABEL11]+'@','@')>7,'#ef6c00','#6a1b9a'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL11]=='Sharing is Caring' || [$LABEL11]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL12]",
      "style": {
        "font-size": "=if(indexOf([$LABEL12]+'@','@')>15,'36px',if(indexOf([$LABEL12]+'@','@')>12,'30px',if(indexOf([$LABEL12]+'@','@')>9,'24px',if(indexOf([$LABEL12]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL12]+'@','@')>15,'#b71c1c',if(indexOf([$LABEL12]+'@','@')>12,'#0d47a1',if(indexOf([$LABEL12]+'@','@')>9,'#1b5e20',if(indexOf([$LABEL12]+'@','@')>7,'#e65100','#4a148c'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL12]=='Sharing is Caring' || [$LABEL12]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL13]",
      "style": {
        "font-size": "=if(indexOf([$LABEL13]+'@','@')>15,'36px',if(indexOf([$LABEL13]+'@','@')>12,'30px',if(indexOf([$LABEL13]+'@','@')>9,'24px',if(indexOf([$LABEL13]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL13]+'@','@')>15,'#d32f2f',if(indexOf([$LABEL13]+'@','@')>12,'#1976d2',if(indexOf([$LABEL13]+'@','@')>9,'#388e3c',if(indexOf([$LABEL13]+'@','@')>7,'#f57c00','#7b1fa2'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL13]=='Sharing is Caring' || [$LABEL13]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL14]",
      "style": {
        "font-size": "=if(indexOf([$LABEL14]+'@','@')>15,'36px',if(indexOf([$LABEL14]+'@','@')>12,'30px',if(indexOf([$LABEL14]+'@','@')>9,'24px',if(indexOf([$LABEL14]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL14]+'@','@')>15,'#c62828',if(indexOf([$LABEL14]+'@','@')>12,'#1565c0',if(indexOf([$LABEL14]+'@','@')>9,'#2e7d32',if(indexOf([$LABEL14]+'@','@')>7,'#ef6c00','#6a1b9a'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL14]=='Sharing is Caring' || [$LABEL14]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL15]",
      "style": {
        "font-size": "=if(indexOf([$LABEL15]+'@','@')>15,'36px',if(indexOf([$LABEL15]+'@','@')>12,'30px',if(indexOf([$LABEL15]+'@','@')>9,'24px',if(indexOf([$LABEL15]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL15]+'@','@')>15,'#b71c1c',if(indexOf([$LABEL15]+'@','@')>12,'#0d47a1',if(indexOf([$LABEL15]+'@','@')>9,'#1b5e20',if(indexOf([$LABEL15]+'@','@')>7,'#e65100','#4a148c'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL15]=='Sharing is Caring' || [$LABEL15]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL16]",
      "style": {
        "font-size": "=if(indexOf([$LABEL16]+'@','@')>15,'36px',if(indexOf([$LABEL16]+'@','@')>12,'30px',if(indexOf([$LABEL16]+'@','@')>9,'24px',if(indexOf([$LABEL16]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL16]+'@','@')>15,'#d32f2f',if(indexOf([$LABEL16]+'@','@')>12,'#1976d2',if(indexOf([$LABEL16]+'@','@')>9,'#388e3c',if(indexOf([$LABEL16]+'@','@')>7,'#f57c00','#7b1fa2'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL16]=='Sharing is Caring' || [$LABEL16]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL17]",
      "style": {
        "font-size": "=if(indexOf([$LABEL17]+'@','@')>15,'36px',if(indexOf([$LABEL17]+'@','@')>12,'30px',if(indexOf([$LABEL17]+'@','@')>9,'24px',if(indexOf([$LABEL17]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL17]+'@','@')>15,'#c62828',if(indexOf([$LABEL17]+'@','@')>12,'#1565c0',if(indexOf([$LABEL17]+'@','@')>9,'#2e7d32',if(indexOf([$LABEL17]+'@','@')>7,'#ef6c00','#6a1b9a'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL17]=='Sharing is Caring' || [$LABEL17]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL18]",
      "style": {
        "font-size": "=if(indexOf([$LABEL18]+'@','@')>15,'36px',if(indexOf([$LABEL18]+'@','@')>12,'30px',if(indexOf([$LABEL18]+'@','@')>9,'24px',if(indexOf([$LABEL18]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL18]+'@','@')>15,'#b71c1c',if(indexOf([$LABEL18]+'@','@')>12,'#0d47a1',if(indexOf([$LABEL18]+'@','@')>9,'#1b5e20',if(indexOf([$LABEL18]+'@','@')>7,'#e65100','#4a148c'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL18]=='Sharing is Caring' || [$LABEL18]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL19]",
      "style": {
        "font-size": "=if(indexOf([$LABEL19]+'@','@')>15,'36px',if(indexOf([$LABEL19]+'@','@')>12,'30px',if(indexOf([$LABEL19]+'@','@')>9,'24px',if(indexOf([$LABEL19]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL19]+'@','@')>15,'#d32f2f',if(indexOf([$LABEL19]+'@','@')>12,'#1976d2',if(indexOf([$LABEL19]+'@','@')>9,'#388e3c',if(indexOf([$LABEL19]+'@','@')>7,'#f57c00','#7b1fa2'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL19]=='Sharing is Caring' || [$LABEL19]=='Mango','bold','normal')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$LABEL20]",
      "style": {
        "font-size": "=if(indexOf([$LABEL20]+'@','@')>15,'36px',if(indexOf([$LABEL20]+'@','@')>12,'30px',if(indexOf([$LABEL20]+'@','@')>9,'24px',if(indexOf([$LABEL20]+'@','@')>7,'20px','16px'))))",
        "color": "=if(indexOf([$LABEL20]+'@','@')>15,'#c62828',if(indexOf([$LABEL20]+'@','@')>12,'#1565c0',if(indexOf([$LABEL20]+'@','@')>9,'#2e7d32',if(indexOf([$LABEL20]+'@','@')>7,'#ef6c00','#6a1b9a'))))",
        "margin": "2px",
        "font-weight": "=if([$LABEL20]=='Sharing is Caring' || [$LABEL20]=='Mango','bold','normal')"
      }
    }
  ]
}
View sourceLink to this definitiongeneric-word-cloud.json

From the contributor

How to use this sample

This project demonstrates how to create a dynamic and visually appealing word cloud within a SharePoint list using column formatting JSON. The word cloud visualizes data from multiple label columns, applying dynamic font sizes, colors, and bold styling based on word characteristics.

screenshot of the sample

Summary

  • Flexible Word Cloud Layout: Uses flex and flex-wrap to automatically arrange words in multiple rows.
  • Dynamic Font Sizes: Word size is calculated based on character length:
    • Words with >15 characters → 36px
    • Words with >12 characters → 30px
    • Words with >9 characters → 24px
    • Words with >7 characters → 20px
    • Words with ≤7 characters → 16px
  • Color Variation: Each word is assigned a color based on thresholds to emphasize word importance and create a visually diverse cloud.
  • Bold Highlighting: Specific words, like "Sharing is Caring" and "Mango", are automatically displayed in bold for emphasis.
  • Responsive Design: Layout adapts to different screen sizes and wraps words automatically.
  • Multi-column Support: Displays words from 20 label columns per item, making it ideal for survey data, tags, or keyword visualization.

View requirements

This word cloud supports the following columns in your SharePoint list:

Column Name Description
Title Title
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

Each column represents a single word or short phrase that will appear in the word cloud. You can extend beyond 20 labels by adding more span elements in the JSON formatting code.

You can extend beyond 20 labels by adding additional span elements in the JSON.

JSON Column Formatting

The JSON formatting applies styles using conditional expressions:

  • Font Size dynamically changes according to word length.
  • Color changes to provide visual differentiation between words.
  • Bold Text applied for highlighted words.
  • Layout uses display: flex with flex-wrap: wrap and gap to arrange words cleanly.

Note: SharePoint JSON formatting does not support rotation or random positioning, so words are displayed in a flexible grid rather than a fully freeform cloud.

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.

Example Visualization

Suppose your list has the following label columns:

LABEL1 LABEL2 LABEL3 LABEL4
Sharing is Caring Mango Banana Apple

The resulting word cloud will:

  • Display "Sharing is Caring" and "Mango" in bold.
  • Assign larger font size to longer words like "Sharing is Caring".
  • Wrap all words neatly across multiple rows.
  • Apply varying colors to each word for better visual effect.
  • Layout automatically wraps and adapts to screen size.

Customization Tips

  • Adding More Words: Extend the JSON by copying existing <span> blocks and updating the column references (LABEL21, LABEL22, etc.).
  • Changing Thresholds: Adjust the character limits and font sizes in the JSON expressions to fit your dataset.
  • Color Palette: Replace the hex codes with your preferred colors to match branding or theme.
  • Bold Words: Add or remove words in the conditional font-weight expressions to highlight other important words.

Limitations

  • No Freeform Rotation: SharePoint JSON formatting cannot rotate or arbitrarily position words. The layout is grid-based using flex wrap.
  • Maximum Columns: JSON supports multiple columns, but extremely large numbers of labels may impact performance.
  • Text Only: This solution works for text/label columns. Rich text or HTML may require preprocessing to extract plain words.

Sample

Solution Author(s)
generic-word-cloud.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.

References