Updates to the Chart Tooltip Docs (#80)

* chore(chart): updates to the chart tooltip docs

* chore(chart): added new template file; small wording updates

* chore(chart): updated chart tooltip docs

Author: svdimitr

_contentTemplates/chart/chart-tooltip-context-templates.md

@@ -0,0 +1,29 @@
+#context-parameter-information
+* `FormattedValue` - maps to the default rendering of the tooltip, formatted as a string.
+ * Use this when the chart's data is bound by [Independent Series Binding]({%slug components/chart/databind%}#independent-series-binding). You can parse this to a numerical value (`int`, `double`, etc.) in order to apply formatting. Otherwise, use the `DataItem` to get the value of the point.
+
+* `DataItem` - provides the data model of the current series item. You may need to cast it to its type.
+
+* `Percentage` - applicable to [Donut]({%slug components/chart/types/donut%}), [Pie]({%slug components/chart/types/pie%}) and [Stacked 100%]({%slug components/chart/stack%}#stack-100) Charts - the percentage value of the current data point from the whole.
+
+* `SeriesIndex` - provides the index of the `<ChartSeries>` the data point belongs to.
+
+* `SeriesName` - bound to the `Name` parameter of the `<ChartSeries>` the data point belongs to.
+
+* `SeriesColor` - shows the RGB color of the Series the data point belongs to.
+
+* `CategoryIndex` - shows the index of the data point's x-axis category.
+#end
+
+
+#shared-tooltip-parameter-settings
+* `Background` - control the background color by applying a CSS color string, including HEX and RGB. By default the it will match the color for the category.
+
+* `Color` - control the text color by applying a CSS color string, including HEX and RGB.
+
+* `Opacity` - control the opacity of the tooltip.
+
+* `Border` - control the `Color` and the `Width` of the tooltip by using the `<ChartSeriesTooltipBorder />` nested inside the `<ChartSeriesTooltip>` tag.
+
+* `Padding` - control the `Left`, `Right`, `Top` and `Bottom` padding of the tooltip by using the `<ChartSeriesTooltipPadding />` nested inside the `<ChartSeriesTooltip>` tag.
+#end

_contentTemplates/chart/link-to-basics.md

@@ -185,31 +185,3 @@ This approach is not limited only to the Labels - it can be used with to all tag
 
 #end
 
-#context-parameter-information
-* `Value` - maps to the value of the data point that is being hovered.
-
-* `DataItem` - provides the data model of the current series item. You may need to cast it to its type.
-
-* `Percentage` - applicable to [Donut]({%slug components/chart/types/donut%}), [Pie]({%slug components/chart/types/pie%}) and [Stacked 100%]({%slug components/chart/stack%}#stack-100) Charts - the percentage value of the current data point from the whole.
-
-* `SeriesIndex` - provides the index of the `<ChartSeries>` the data point belongs to.
-
-* `SeriesName` - bound to the `Name` parameter of the `<ChartSeries>` the data point belongs to.
-
-* `SeriesColor` - shows the RGB color of the Series the data point belongs to.
-
-* `CategoryIndex` - shows the index of the data point's x-axis category.
-#end
-
-
-#shared-tooltip-parameter-settings
-* `Background` - control the background color by applying a CSS color string, including HEX and RGB. By default the it will match the color for the category.
-
-* `Color` - control the text color by applying a CSS color string, including HEX and RGB.
-
-* `Opacity` - control the opacity of the tooltip.
-
-* `Border` - control the `Color` and the `Width` of the tooltip by using the `<ChartSeriesTooltipBorder />` nested inside the `<ChartSeriesTooltip>` tag.
-
-* `Padding` - control the `Left`, `Right`, `Top` and `Bottom` padding of the tooltip by using the `<ChartSeriesTooltipPadding />` nested inside the `<ChartSeriesTooltip>` tag.
-#end

components/chart/tooltip/images/shared-tooltip-template.png

@@ -40,11 +40,11 @@ To enable tooltips for the data points of each individual series:
     <ChartSeriesItems>
         <ChartSeries Type="ChartSeriesType.Column" Name="Series 1" Data="@data1">
         </ChartSeries>
-        
+
         <ChartSeries Type="ChartSeriesType.Column" Name="Series 2" Data="@data2">
             <ChartSeriesTooltip Visible="true"></ChartSeriesTooltip>
         </ChartSeries>
-        
+
     </ChartSeriesItems>
 
     <ChartCategoryAxes>
@@ -84,7 +84,7 @@ To enable the same tooltip for all series:
 
     <ChartTooltip Visible="true">
     </ChartTooltip>
-    
+
     <ChartSeriesItems>
         <ChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
         </ChartSeries>
@@ -201,7 +201,7 @@ You can customize the appearance of the individual series tooltip by using:
 
 In a similar fashion, you can declare these settings in the common tooltip section. Their tag names are slightly different, however:
 
-@[template](/_contentTemplates/chart/link-to-basics.md#shared-tooltip-parameter-settings)
+@[template](/_contentTemplates/chart/chart-tooltip-context-templates.md#shared-tooltip-parameter-settings)
 
 * Use the [Template](#template) to take control over what is rendered in the tooltip - the tag name and data it provides is the same as for the specific tooltip, but it affects all series at once.
 
@@ -218,10 +218,10 @@ In the template you can:
 
 The available series data point information in the `context` is:
 
-@[template](/_contentTemplates/chart/link-to-basics.md#context-parameter-information)
+@[template](/_contentTemplates/chart/chart-tooltip-context-templates.md#context-parameter-information)
 
 
->caption Use the Tooltip Template to add an Icon and additional information to the series tooltip
+>caption Use the Tooltip Template and use the DataItem to get the value of the point and add additional information
 
 ````CSHTML
 @* This example shows how to use the Template to provide an Icon and additional information from the model *@
@@ -235,7 +235,7 @@ The available series data point information in the `context` is:
             <ChartSeriesTooltip Visible="true">
                 <Template>
                     <TelerikIcon Icon="@IconName.Information" />
-                    @context.Value for @((context.DataItem as MyDataModel).ExtraData)
+                    @((context.DataItem as MyDataModel).SecondSeriesValue) for @((context.DataItem as MyDataModel).ExtraData)
                 </Template>
             </ChartSeriesTooltip>
         </ChartSeries>
@@ -264,7 +264,7 @@ The available series data point information in the `context` is:
     }
 
     public List<MyDataModel> modelData = new List<MyDataModel>()
-    {
+{
         new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
         new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
         new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },

components/chart/tooltip/overview.md

@@ -73,7 +73,7 @@ There are two types of customizations you can do for the tooltips:
 ### Parameter Settings
 You can customize the rendering of the `Shared` tooltip by using:
 
-@[template](/_contentTemplates/chart/link-to-basics.md#shared-tooltip-parameter-settings)
+@[template](/_contentTemplates/chart/chart-tooltip-context-templates.md#shared-tooltip-parameter-settings)
 
 
 ### Shared Template
@@ -95,29 +95,31 @@ The `context` contains the following information:
 
 Each `Point` contains the following data:
 
-@[template](/_contentTemplates/chart/link-to-basics.md#context-parameter-information)
+@[template](/_contentTemplates/chart/chart-tooltip-context-templates.md#context-parameter-information)
 
 
 >caption Usage of the SharedTemplate
 
 ````CSHTML
-@* This example shows how to use the SharedTemplate and extract information on the data points value and category from the context *@
+@* This example shows how to use the SharedTemplate and extract information on the data points value, parse them to int and get the category from the context *@
 
 <TelerikChart>
     <ChartTooltip Visible="true" Shared="true">
         <SharedTemplate>
-           @{
-               var points = context.Points;
-
-               foreach (var point in points)
-               {
-                   <div>
-                       <TelerikIcon Icon="@IconName.Information" />
-                       Point value: @point.Value
-                       Category: @context.Category
-                   </div>
-               }
-           }
+            @{
+                var points = context.Points;
+
+                foreach (var point in points)
+                {
+                    <div>
+                        <TelerikIcon Icon="@IconName.Information" />
+                        @*this example shows how to parse the FormattedValue to a int,*@
+                        @*but you can also parse it to any other type your data uses / has*@
+                        Point value: @(int.Parse(point.FormattedValue).ToString("C"))
+                        Category: @context.Category
+                    </div>
+                }
+            }
         </SharedTemplate>
     </ChartTooltip>
     <ChartSeriesItems>