Featured screenshots
Pie chart are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. It is one of many types provided by Chart.js
This template can be applied on list views that have the following columns:
| Template Field | Type | Usage |
|---|---|---|
| fldTitle | Single line of text | Title for the element to be measured |
| fldValue | Number | Value for the element to be measured |
Info
If you have different column names you can change them from the Apply tab and change field mappings from the Fields Mapping section.
This template has the following settings to play with. Below are the available settings with all options and their default values:
| Setting | Default | Usage |
|---|---|---|
| width | 600 | Chart width |
| height | 400 | Chart height |
| animate | true | Whether to animate the chart |
| animationSteps | 100 | Number of animation steps |
| animationEasing | easeOutBounce | Animation easing effect |
| showScale | true | If we should show the scale at all |
| scaleLineColor | rgba(0,0,0,.1) | Colour of the scale line |
| scaleLineWidth | 1 | Pixel width of the scale line |
| scaleShowLabels | true | Whether to show labels on the scale |
| scaleLabel | <%=value%> | Interpolated JS string - can access value |
| scaleBeginAtZero | true | Whether the scale should start at zero, or an order of magnitude down from the lowest value scaleBeginAtZero: false |
| scaleFontSize | 12 | Scale label font size in pixels |
| scaleFontColor | #666 | Scale label font colour |
| responsive | false | whether or not the chart should be responsive and resize when the browser does. your SharePoint Master page should support responsive |
| maintainAspectRatio | true | whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container |
| showTooltips | true | Determines whether to draw tooltips on the canvas or not |
| tooltipFillColor | rgba(0,0,0,0.8) | Tooltip background colour |
| tooltipFontSize | 14 | Tooltip label font size in pixels |
| tooltipFontColor | #fff | Tooltip label font colour |
| tooltipTitleFontSize | 14 | Tooltip title font size in pixels |
| tooltipTitleFontColor | #fff | Tooltip title font colour |
| tooltipYPadding | 6 | pixel width of padding around tooltip text |
| tooltipXPadding | 6 | pixel width of padding around tooltip text |
| tooltipCaretSize | 8 | Size of the caret on the tooltip |
| tooltipCornerRadius | 6 | Pixel radius of the tooltip border |
| tooltipXOffset | 10 | Pixel offset from point x to tooltip edge |
| tooltipTemplate | <%if (label){%><%=label%>: <%}%><%= value %> | Template string for single tooltips |
| segmentShowStroke | true | Whether we should show a stroke on each segment |
| segmentStrokeColor | #fff | The colour of each segment stroke |
| segmentStrokeWidth | 2 | The width of each segment stroke |
| percentageInnerCutout | 0 | The percentage of the chart that we cut out of the middle (This is 0 for Pie charts) |
| animateRotate | true | Whether we animate the rotation of the Doughnut |
| animateScale | false | Whether we animate scaling the Doughnut from the centre |
| itemsColors | #F7464A, #46BFBD, #FDB45C, #949FB1, #4D5360 | Default items colors used by the chart |
| itemsHighlights | #FF5A5E, #5AD3D1, #FFC870, #A8B3C5, #616774 | Default items colors highlight used by the chart |
The following libraries were used to help creating this template: