Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md Expression updates (#78) Aug 21, 2018
number-piechart.PNG
number-piechart.json Expression updates (#78) Aug 21, 2018
number-piechartAST.json Expression updates (#78) Aug 21, 2018

README.md

Formatting percentage number (%) to pie chart.

Summary

This example renders whole pie in neutralLight with radius 50 and the number% (column value) as a slice of the pie in blue using <svg> with <path> tags. The number% displayed at the bottom of the pie in neutralPrimary.

The background and text colors are set using theme values by applying classes from the Office UI Fabric. Unfortunately, there is not a theme class for fill and so the pie is set to a specific value that will not update through theme switches and so should be chosen carefully. Both a light and dark theme are shown in the screenshot below.

screenshot of the sample

View requirements

  • This format can be applied to a Number column

Sample

Solution Author(s)
number-piechart.json Aaron Miao

Version history

Version Date Comments
1.0 Dec 13, 2017 Initial release
1.1 March 20, 2018 Added min & max values and fixed skewed drawing issue
1.2 August 20, 2018 Switched to Excel-style expressions and use of theme classes

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

A similar wizard is also included in the Column Formatter webpart that allows full customization.

An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported.