diff --git a/_contentTemplates/chart/chart-tooltip-context-templates.md b/_contentTemplates/chart/chart-tooltip-context-templates.md index 454daa0cd1..8174787d42 100644 --- a/_contentTemplates/chart/chart-tooltip-context-templates.md +++ b/_contentTemplates/chart/chart-tooltip-context-templates.md @@ -2,7 +2,13 @@ * `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. +* `DataItem` - provides the data model of the current series item. You need to cast it to the type from your datasource, which needs to be serializable. + + * If you are using a [Date Axis]({%slug components/chart/date-axis%}), the `DataItem` will contain the only the aggregated value in the corresponding y-value field, because it is a collection of more than one items. See the `Category` below for details. + +* `Category` - provides information on the category the data point is located in. You need to cast it to the type in your data source, for example `DateTime`, `string`, `int` or another type. The `Category` parameter is applicable to [Categorical Charts]({%slug components/chart/databind%}#series-types). + + * When using a [Date Axis]({%slug components/chart/date-axis%}), you can use it, together with the `BaseUnit` value of the axis, to filter the data source and obtain the actual data items from the data source in case you want to provide extra information about them. * `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. @@ -22,8 +28,4 @@ * `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 `` nested inside the `` tag. - -* `Padding` - control the `Left`, `Right`, `Top` and `Bottom` padding of the tooltip by using the `` nested inside the `` tag. #end diff --git a/components/chart/tooltip/images/tooltip-common-example.gif b/components/chart/tooltip/images/tooltip-common-example.gif index d68a7e916d..3666d456e1 100644 Binary files a/components/chart/tooltip/images/tooltip-common-example.gif and b/components/chart/tooltip/images/tooltip-common-example.gif differ diff --git a/components/chart/tooltip/overview.md b/components/chart/tooltip/overview.md index 7e1e1ab94f..7f0a960fa8 100644 --- a/components/chart/tooltip/overview.md +++ b/components/chart/tooltip/overview.md @@ -129,10 +129,6 @@ You can customize the appearance of the individual series tooltip by using: * `Color` - control the text color by applying a CSS color string, including HEX and RGB. -* `Border` - control the `Color` and the `Width` of the tooltip by using the `` nested inside the `` tag. - -* `Padding` - control the `Left`, `Right`, `Top` and `Bottom` padding of the tooltip by using the `` nested inside the `` tag. - * Use the [Template](#template) to take control over what is rendered in the tooltip. >caption Configuration of the tooltips with applied customization settings @@ -149,8 +145,6 @@ You can customize the appearance of the individual series tooltip by using: - - @@ -199,7 +193,7 @@ You can customize the appearance of the individual series tooltip by using: #### Common Tooltip Settings -In a similar fashion, you can declare these settings in the common tooltip section. Their tag names are slightly different, however: +In a similar fashion, you can declare these settings in the common tooltip section: @[template](/_contentTemplates/chart/chart-tooltip-context-templates.md#shared-tooltip-parameter-settings) @@ -264,7 +258,7 @@ The available series data point information in the `context` is: } public List modelData = new List() -{ + { new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" }, new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" }, new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },