Skip to content

Commit aa4e809

Browse files
docs(chart): better explanations for template syntax
1 parent 5b8b27f commit aa4e809

File tree

1 file changed

+7
-3
lines changed

1 file changed

+7
-3
lines changed

components/chart/labels-template-and-format.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ You can jump to the following sections in this article:
1818

1919
* [Format Strings](#format-strings)
2020
* [Templates](#templates)
21-
* [Hide Label Conditionally](#hide-label-conditionally)
21+
* [Example: Hide Label Conditionally](#hide-label-conditionally)
2222

2323
## Format Strings
2424

@@ -86,7 +86,9 @@ To set a template for the corresponding label, use the `Template` property in th
8686

8787
After the example, you can find lists with the available fields you can use in templates.
8888

89-
To add a new line, use the `\n` symbol.
89+
To add a new line, use the `\n` symbol. The other available objects are added through the `#=theObject#` syntax. You can find more details in the code samples below (including simple if-block logic).
90+
91+
The general syntax of the templates is based on the [Kendo Templates](https://docs.telerik.com/kendo-ui/framework/templates/overview). Note that the chart labels are not HTML elements and you cannot use HTML in them, only plain strings are allowed. Also, the various helper functions that come from the Kendo jQuery library are not available in Blazor (for example, `kendo.toString()` or `kendo.format()`).
9092

9193
To format the values, you need to call a JavaScript function that will return the desired new string based on the template value you pass to it. You can find an example of this in the [How to format the percent in a label for a pie or donut chart]({%slug chart-format-percent%}) knowledge base article.
9294

@@ -167,7 +169,7 @@ Label templates
167169
In a **series label template**, you can use the following fields:
168170

169171
* `category` - the category name. Available for area, bar, column, donut, line, pie series.
170-
* `dataItem` - the original data item used to construct the point. Will be `null` if binding to array.
172+
* `dataItem` - the original data item used to construct the point. Will be `null` if binding to array. Sample syntax: `#=dataItem.MyModelFieldName#`.
171173
* `percentage` - the point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.
172174
* `stackValue` - the cumulative point value on the stack. Available only for stackable series.
173175
* `value` - the point value. Can be a number or object containing each bound field.
@@ -205,6 +207,8 @@ To do that, you need to:
205207
* add conditional logic in the template that renders the desired content when your condition is met, and returns nothing when it is not.
206208
* ensure the labels background is transparent so there are no leftover spots on the chart.
207209

210+
This example also showcases basic logic use in the templates that does not require external functions.
211+
208212
>caption Hide labels with zero values
209213
210214
````CSHTML

0 commit comments

Comments
 (0)