SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Inline Column Chart

This sample demonstrates displaying a column chart using SVG. It uses the `currentColor` for the fill value of the SVGs which allows us to use a theme class to make the final SVGs fit your site's theme.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Oct 10, 2020

Inline Column Chart formatting preview
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": {
    "fill": "currentColor",
    "height": "104px"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "height": "100%"
      },
      "attributes": {
        "title": "[$January]"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "width": "20px",
            "height": "100px",
            "padding": "0 4px"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "= 'M 0,100 L 0,' + (100 - [$January]) + ' 20,' + (100 - [$January]) + ' 20,100'"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "height": "100%"
      },
      "attributes": {
        "title": "[$February]"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "width": "20px",
            "height": "100px",
            "padding": "0 4px"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "= 'M 0,100 L 0,' + (100 - [$February]) + ' 20,' + (100 - [$February]) + ' 20,100'"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "height": "100%"
      },
      "attributes": {
        "title": "[$March]"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "width": "20px",
            "height": "100px",
            "padding": "0 4px"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "= 'M 0,100 L 0,' + (100 - [$March]) + ' 20,' + (100 - [$March]) + ' 20,100'"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "height": "100%"
      },
      "attributes": {
        "title": "[$April]"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "width": "20px",
            "height": "100px",
            "padding": "0 4px"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "= 'M 0,100 L 0,' + (100 - [$April]) + ' 20,' + (100 - [$April]) + ' 20,100'"
              }
            }
          ]
        }
      ]
    }
  ]
}
View sourceLink to this definitiongeneric-column-chart.json

From the contributor

How to use this sample

Summary

This sample demonstrates displaying a column chart using SVG. It uses the currentColor for the fill value of the SVGs which allows us to use a theme class to make the final SVGs fit your site's theme.

screenshot of the sample

This example shows values from 0 to 100. You can adjust this scale by changing the d attribute of the path elements to calculate a percentage rather than use the value directly.

View requirements

This format can be applied to any column type. However, it expects to have 4 number columns in the view.

Column Name Type
January Number
February Number
March Number
April Number
Chart Any

The column where you apply your format (Chart above) can be any type since it's value is ignored. A calculated column with a formula of ="" will prevent the field from showing up on your forms.

Adapting to your fields

This sample can easily be adjusted to work with your columns. Each chart column uses the internal name of a field 3 times. You can replace these with your own fields. You can also add additional columns by copying one of the child div elements and changing the referenced field.

Sample

Solution Author(s)
generic-column-chart.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 October 10, 2020 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.

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