Featured screenshots
Bar Chart is a way of showing multiple data points and the variation between them. They are useful for comparing between many values as seen in the image below
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 |
| animation | true | Whether to animate the chart |
| animationSteps | 60 | Number of animation steps |
| animationEasing | easeOutQuart | 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 |
| multiTooltipTemplate | <%= value %> | Template string for multi tooltips |
| scaleShowGridLines | true | Whether grid lines are shown across the chart |
| scaleGridLineColor | rgba(0,0,0,.05) | Color of the grid lines |
| scaleGridLineWidth | 1 | Width of the grid lines |
| barShowStroke | true | If there is a stroke on each bar |
| barStrokeWidth | 2 | Pixel width of the bar stroke |
| barValueSpacing | 5 | Spacing between each of the X value sets |
| barDatasetSpacing | 1 | Spacing between data sets within X values |
The following libraries were used to help creating this template: