SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Heart Shading

This sample demonstrates how to express percentages in terms of the color shading of a heart displayed in SVG.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Feb 13, 2022

Heart Shading formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

3 definitions

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",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "row",
        "white-space": "nowrap",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-direction": "row",
            "height": "25px",
            "white-space": "nowrap",
            "color": "red"
          },
          "children": [
            {
              "elmType": "div",
              "children": [
                {
                  "elmType": "svg",
                  "style": {
                    "fill": "currentColor",
                    "stroke": "currentColor",
                    "fill-opacity": "=if(@currentField >= 0.2 , '1' , (@currentField / 0.2) )",
                    "height": "100%"
                  },
                  "attributes": {
                    "viewBox": "0 0 100 100"
                  },
                  "children": [
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "children": [
                {
                  "elmType": "svg",
                  "style": {
                    "fill": "currentColor",
                    "stroke": "currentColor",
                    "fill-opacity": "=if(@currentField >= 0.4 , '1' , if(@currentField > 0.2 , ((@currentField - 0.2) / 0.2) , '0'))",
                    "height": "100%"
                  },
                  "attributes": {
                    "viewBox": "0 0 100 100"
                  },
                  "children": [
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "children": [
                {
                  "elmType": "svg",
                  "style": {
                    "fill": "currentColor",
                    "stroke": "currentColor",
                    "fill-opacity": "=if(@currentField >= 0.6 , '1' , if(@currentField > 0.4 , ((@currentField - 0.4) / 0.2) , '0'))",
                    "height": "100%"
                  },
                  "attributes": {
                    "viewBox": "0 0 100 100"
                  },
                  "children": [
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "children": [
                {
                  "elmType": "svg",
                  "style": {
                    "fill": "currentColor",
                    "stroke": "currentColor",
                    "fill-opacity": "=if(@currentField >= 0.8 , '1' , if(@currentField > 0.6 , ((@currentField - 0.6) / 0.2) , '0'))",
                    "height": "100%"
                  },
                  "attributes": {
                    "viewBox": "0 0 100 100"
                  },
                  "children": [
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "children": [
                {
                  "elmType": "svg",
                  "style": {
                    "fill": "currentColor",
                    "stroke": "currentColor",
                    "fill-opacity": "= ((@currentField - 0.8) / 0.2)",
                    "height": "100%"
                  },
                  "attributes": {
                    "viewBox": "0 0 100 100"
                  },
                  "children": [
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "margin-left": "12px",
            "font-weight": "bold",
            "font-size": "14px"
          },
          "txtContent": "@currentField.displayValue"
        }
      ]
    }
  ]
}
View sourceLink to this definitionnumber-heart-shading-custom-color.json

From the contributor

How to use this sample

Summary

This sample demonstrates how to express percentages in terms of the color shading of a heart displayed in SVG.

  • number-heart-shading.json uses the theme color of the site as the color of the heart.
  • number-heart-shading-custom-color uses the HTML color code as the the color of the heart, and in the sample, #FF0000 is set.
  • number-heart-shading-rainbow-color.json uses different colors for each heart, starting from the left heart: purple, blue, green, yellow, and red.

screenshot of the sample

View requirements

This format can be applied to a Number column. It is expected that the values will be from 0 to 1 (percent).

Sample

Solution Author(s)
number-heart-shading.json Tetsuya Kawahara
number-heart-shading-custom-color.json Tetsuya Kawahara
number-heart-shading-rainbow-color.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 February 13, 2022 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

The SVG heart in this sample is based on a sample from the following site.

Keep exploring

More formats like this

Doughnut Chart

Changes the appearance of the values in number columns (percent) to a donut chart.

Explore format

Monthly Gantt Chart

This sample demonstrates the display of a monthly Gantt chart. The Gantt chart for the month corresponding to the StartDate value will be shown.

Explore format

Format a column with multi-path SVGs

This formats applies different SVGs with multiple paths to a number field, depending on the value of the field.

Explore format