|
1 | | ---- |
2 | | -title: Basic Configuration |
3 | | -page_title: Basic Configuration | RadHtmlChart for ASP.NET AJAX Documentation |
4 | | -description: Basic Configuration |
5 | | -slug: htmlchart/server-side-programming/basic-configuration |
6 | | -tags: basic,configuration |
7 | | -published: True |
8 | | -position: 1 |
9 | | ---- |
10 | | - |
11 | | -# Basic Configuration |
12 | | - |
13 | | -**RadHtmlChart** provides a rich set of properties and events which can help you configure the look and behaviour of the control. In this article you will find a list with the available public methods and properties of the control, and the arguments they accept. |
14 | | - |
15 | | -## Attribute Properties of the Main Tag |
16 | | - |
17 | | -| **Name** | **Description** | |
18 | | -| ------ | ------ | |
19 | | -| **DataSourceID** |Used to set a declarative data source to the **RadHtmlChart** control (e.g., SqlDataSource, LinqDataSource, EntityDataSource).| |
20 | | -| **DataSource** |Used to set a programmatic data source to the **RadHtmlChart** control (e.g., a DataTable, List of custom objects, DataSet).| |
21 | | -| **Height** |Get/set the height of the **RadHtmlChart** control in pixels.| |
22 | | -| **InvokeLoadData** |Determines when the actual data will be loaded. Takes a member of the Telerik.Web.UI.HtmlChart.LoadDataInvocation enumeration: **AfterPageLoad** - The data is loaded just after the entire page is loaded via a lightweight callback. Its effect would be noticeable in larger (slower) pages; - **FromCode** - Data is loaded only when explicitly called via the [client-side API]({%slug htmlchart/client-side-programming/overview%}) of the control (the **loadData()** method) via a lightweight callback; - **OnPageLoad** - Data is loaded when the page is being loaded along with the rest of the controls. This is the only case where it is available in the page markup and a callback is not performed.| |
23 | | -| **OnClientSeriesClicked** |The name of the handler for the [OnClientSeriesClicked(deprecated)]({%slug htmlchart/client-side-programming/events/onclientseriesclicked(deprecated)%}) client-side event.| |
24 | | -| **OnClientSeriesHovered** |The name of the handler for the [OnClientSeriesHovered(deprecated)]({%slug htmlchart/client-side-programming/events/onclientserieshovered(deprecated)%}) client-side event.| |
25 | | -| **Layout** |A property indicating whether the chart will be rendered as Default, Sparkline or Stock chart.| |
26 | | -| **RenderAs** |A property indicating whether the chart will be rendered as **Canvas**, **SVG** or **VML** . Setting the property to **Auto** will instruct the chart to automatically decide how to be rendered, based on the browser. This property is available since **Q1 2015** .| |
27 | | -| **Transitions** |Get/set whether an animation is played when the chart is rendered.| |
28 | | -| **Width** |Get/set the width of the control in pixels.| |
29 | | - |
30 | | -## Attribute Property in Main Tag > Appearance > FillStyle |
31 | | - |
32 | | -| **Name** | **Description** | |
33 | | -| ------ | ------ | |
34 | | -| **BackgroundColor** |The background color of the main chart area. Can take a common color name or a hex value.| |
35 | | - |
36 | | -## Attribute Property in Main Tag > ChartTitle |
37 | | - |
38 | | -| **Name** | **Description** | |
39 | | -| ------ | ------ | |
40 | | -| **Text** |A string for the chart title.| |
41 | | - |
42 | | -## Attribute Properties in Main Tag > ChartTitle > Appearance |
43 | | - |
44 | | -| **Name** | **Description** | |
45 | | -| ------ | ------ | |
46 | | -| **Align** |The alignment of the title according to the chart. An enumeration ( **Telerik.Web.UI.HtmlChart.ChartTitleAlign** ) with one of the following values: Left, Center or Right.| |
47 | | -| **BackgroundColor** |The background color of the title area. Can take a common color name or a hex value.| |
48 | | -| **Height** |The legend height when the legend orientation is set to Vertical.| |
49 | | -| **OffsetX** |The X offset of the chart legend. The offset is relative to the current position of the legend.| |
50 | | -| **OffsetY** |The Y offset of the chart legend. The offset is relative to the current position of the legend.| |
51 | | -| **Orientation** |The orientation of the legend items. Takes Vertical (i.e., legend items are added vertically) and Horizontal (i.e., legend items are added horizontally) values.| |
52 | | -| **Position** |The vertical position of the chart title. An enumeration ( **Telerik.Web.UI.HtmlChart.ChartTitlePosition** ) with the following values: Top, Bottom, Left, Right and Custom. Custom value positions the legend to the upper left corner and is used with **OffsetX** and **OffsetY** properties | |
53 | | -| **TextStyle** |Controls the appearance of the labels in this element. See the [Labels and Titles Font Settings]({%slug htmlchart/appearance-and-styling/labels-and-titles-font-settings%}) article for detailed information.| |
54 | | -| **Width**|The legend width when the legend orientation is set to Horizontal.| |
55 | | -| **Visible** |Defines whether the chart title is shown. Values are True or False.| |
56 | | - |
57 | | -## Attribute Properties in Main Tag > Legend > Appearance |
58 | | - |
59 | | - |
60 | | -| **Name** | **Description** | |
61 | | -| ------ | ------ | |
62 | | -| **BackgroundColor** |The background color of the legend area. Can take a common color name or a hex value.| |
63 | | -| **Align** |The alignment of the chart legend relative to the position. Takes the following values - Start, Center and End.| |
64 | | -| **Position** |The position of the chart legend relative to the plot area. An enumeration (Telerik.Web.UI.HtmlChart.ChartLegendPosition) with the following values: Bottom, Left, Right, Top.| |
65 | | -| **TextStyle** |Controls the appearance of the labels in this element. See the [Labels and Titles Font Settings]({%slug htmlchart/appearance-and-styling/labels-and-titles-font-settings%}) article for detailed information.| |
66 | | -| **Visible** |Defines whether the chart legend is shown. Values are True or False.| |
67 | | - |
68 | | -## Attribute Property in Main Tag > PlotArea > Appearance > FillStyle |
69 | | - |
70 | | - |
71 | | -| **Name** | **Description** | |
72 | | -| ------ | ------ | |
73 | | -| **BackgroundColor** |The background color of the plot area. Can take a common color name or a hex value.| |
74 | | - |
75 | | -## Attribute Properties in Main Tag > PlotArea > Appearance > TextStyle |
76 | | - |
77 | | - |
78 | | -| **Name** | **Description** | |
79 | | -| ------ | ------ | |
80 | | -| **Margin** |Takes from one to four integers that specify all the margins the PlotArea will have in pixels.| |
81 | | - |
82 | | -For example: |
83 | | - |
84 | | -* **Margin="15"** —all four margins are 15px. |
85 | | - |
86 | | -* **Margin="15 30"** —top and bottom margins are 15px; right and left margins are 30px. |
87 | | - |
88 | | -* **Margin="15 30 45"** —top margin is 15px; right and left margins are 30px; bottom margin is 45px. |
89 | | - |
90 | | -* **Margin="15 30 45 60"** —top margin is 15px; right margin is 30px; bottom margin is 45px; left margin is 60px; |
91 | | - |
92 | | -## Attribute Properties in Main Tag > PlotArea > CommonTooltipsAppearance |
93 | | - |
94 | | - |
95 | | -| **Name** | **Description** | |
96 | | -| ------ | ------ | |
97 | | -| **BackgroundColor** |The background color of the tooltips for the items from this series. Can take a common color name or a hex value. If it is not set explicitly the control will pick one according to currenly used Skin.| |
98 | | -| **Color** |The text color of the tooltips for the items from this series. Can take a common color name or a hex value. If it is not set explicitly the control will pick one according to the currently used Skin.| |
99 | | -| **ClientTemplate** |A string for the client template that will be applied to the tooltips when they render. It can use any column from the data source given to the chart through the following syntax: **#=dataItem.ColumnName#** where the string delimited inside #=.....# is the expression to be evaluated. The tooltips are HTML so HTML can be used outside of the expression tags. See [here]({%slug htmlchart/functionality/clienttemplate/overview%}) for more information.| |
100 | | -| **DataFormatString** |The format string that will form the labels' text. The **{0}** placeholder is used to denote the **Y** value of the item. For the **ScatterSeries** and **ScatterLineSeries** you can use **{1}** for the **X** value. Although **CandlestickSeries** ToolTips have already predefined pattern by design it can be modified through **{0}** , **{1}** , **{2}** , **{3}** and **{4}** placeholders that denotes accordingly the Open, High, Low, Close and the corresponding XAxis item's value.| |
101 | | -| **Shared** |Defines whether the chart will display a single tooltip for every category. Values are True or False.| |
102 | | -| **SharedTemplate** |A string for the shared template that will be applied to the tooltips when they render. It can use the **points** (the category points) and **category** (the category name) fields through the following syntax: **#= category #, #= points[0].series.name#, #= points[0].value #** where the string delimited inside #=.....# is the expression to be evaluated. The tooltips are HTML so HTML can be used outside of the expression tags. See [here]({%slug htmlchart/functionality/clienttemplate/overview%}) for more information.| |
103 | | -| **Visible** |Defines whether the tooltips will be shown. Values are True or False.| |
104 | | - |
105 | | -## See Also |
106 | | - |
107 | | - * [Visual Structure of the RadHtmlChart Control’s Tag Hierarchy]({%slug htmlchart/server-side-programming/overview%}) |
108 | | - |
109 | | - * [Configuring Tags in the RadHtmlChart Series]({%slug htmlchart/server-side-programming/series-configuration%}) |
110 | | - |
111 | | - * [Configuring Tags in the RadHtmlChart Series]({%slug htmlchart/server-side-programming/series-items-configuration%}) |
112 | | - |
113 | | - * [Configuring PlotArea Element Axes of the RadHtmlChart]({%slug htmlchart/server-side-programming/axes-configuration%}) |
114 | | - |
115 | | - * [Labels and Titles Font Settings in RadHtmlChart]({%slug htmlchart/appearance-and-styling/labels-and-titles-font-settings%}) |
| 1 | +--- |
| 2 | +title: Basic Configuration |
| 3 | +page_title: Basic Configuration | RadHtmlChart for ASP.NET AJAX Documentation |
| 4 | +description: Basic Configuration |
| 5 | +slug: htmlchart/server-side-programming/basic-configuration |
| 6 | +tags: basic,configuration |
| 7 | +published: True |
| 8 | +position: 1 |
| 9 | +--- |
| 10 | + |
| 11 | +# Basic Configuration |
| 12 | + |
| 13 | +**RadHtmlChart** provides a rich set of properties and events which can help you configure the look and behaviour of the control. In this article you will find a list with the available public methods and properties of the control, and the arguments they accept. |
| 14 | + |
| 15 | +## Attribute Properties of the Main Tag |
| 16 | + |
| 17 | +| **Name** | **Description** | |
| 18 | +| ------ | ------ | |
| 19 | +| **DataSourceID** |Used to set a declarative data source to the **RadHtmlChart** control (e.g., SqlDataSource, LinqDataSource, EntityDataSource).| |
| 20 | +| **DataSource** |Used to set a programmatic data source to the **RadHtmlChart** control (e.g., a DataTable, List of custom objects, DataSet).| |
| 21 | +| **Height** |Get/set the height of the **RadHtmlChart** control in pixels.| |
| 22 | +| **InvokeLoadData** |Determines when the actual data will be loaded. Takes a member of the Telerik.Web.UI.HtmlChart.LoadDataInvocation enumeration: **AfterPageLoad** - The data is loaded just after the entire page is loaded via a lightweight callback. Its effect would be noticeable in larger (slower) pages; - **FromCode** - Data is loaded only when explicitly called via the [client-side API]({%slug htmlchart/client-side-programming/overview%}) of the control (the **loadData()** method) via a lightweight callback; - **OnPageLoad** - Data is loaded when the page is being loaded along with the rest of the controls. This is the only case where it is available in the page markup and a callback is not performed.| |
| 23 | +| **OnClientSeriesClicked** |The name of the handler for the [OnClientSeriesClicked(deprecated)]({%slug htmlchart/client-side-programming/events/onclientseriesclicked(deprecated)%}) client-side event.| |
| 24 | +| **OnClientSeriesHovered** |The name of the handler for the [OnClientSeriesHovered(deprecated)]({%slug htmlchart/client-side-programming/events/onclientserieshovered(deprecated)%}) client-side event.| |
| 25 | +| **Layout** |A property indicating whether the chart will be rendered as Default, Sparkline or Stock chart.| |
| 26 | +| **RenderAs** |A property indicating whether the chart will be rendered as **Canvas**, **SVG** or **VML** . Setting the property to **Auto** will instruct the chart to automatically decide how to be rendered, based on the browser. This property is available since **Q1 2015** .| |
| 27 | +| **Transitions** |Get/set whether an animation is played when the chart is rendered.| |
| 28 | +| **Width** |Get/set the width of the control in pixels.| |
| 29 | + |
| 30 | +## Attribute Property in Main Tag > Appearance > FillStyle |
| 31 | + |
| 32 | +| **Name** | **Description** | |
| 33 | +| ------ | ------ | |
| 34 | +| **BackgroundColor** |The background color of the main chart area. Can take a common color name or a hex value.| |
| 35 | + |
| 36 | +## Attribute Property in Main Tag > ChartTitle |
| 37 | + |
| 38 | +| **Name** | **Description** | |
| 39 | +| ------ | ------ | |
| 40 | +| **Text** |A string for the chart title.| |
| 41 | + |
| 42 | +## Attribute Properties in Main Tag > ChartTitle > Appearance |
| 43 | + |
| 44 | +| **Name** | **Description** | |
| 45 | +| ------ | ------ | |
| 46 | +| **Align** |The alignment of the title according to the chart. An enumeration ( **Telerik.Web.UI.HtmlChart.ChartTitleAlign** ) with one of the following values: Left, Center or Right.| |
| 47 | +| **BackgroundColor** |The background color of the title area. Can take a common color name or a hex value.| |
| 48 | +| **Height** |The legend height when the legend orientation is set to Vertical.| |
| 49 | +| **OffsetX** |The X offset of the chart legend. The offset is relative to the current position of the legend.| |
| 50 | +| **OffsetY** |The Y offset of the chart legend. The offset is relative to the current position of the legend.| |
| 51 | +| **Orientation** |The orientation of the legend items. Takes Vertical (i.e., legend items are added vertically) and Horizontal (i.e., legend items are added horizontally) values.| |
| 52 | +| **Position** |The vertical position of the chart title. An enumeration ( **Telerik.Web.UI.HtmlChart.ChartTitlePosition** ) with the following values: Top, Bottom, Left, Right and Custom. Custom value positions the legend to the upper left corner and is used with **OffsetX** and **OffsetY** properties | |
| 53 | +| **TextStyle** |Controls the appearance of the labels in this element. See the [Labels and Titles Font Settings]({%slug htmlchart/appearance-and-styling/labels-and-titles-font-settings%}) article for detailed information.| |
| 54 | +| **Width**|The legend width when the legend orientation is set to Horizontal.| |
| 55 | +| **Visible** |Defines whether the chart title is shown. Values are True or False.| |
| 56 | + |
| 57 | +## Attribute Properties in Main Tag > Legend > Appearance |
| 58 | + |
| 59 | + |
| 60 | +| **Name** | **Description** | |
| 61 | +| ------ | ------ | |
| 62 | +| **Align** |The alignment of the chart legend relative to the position. Takes the following values - Start, Center and End.| |
| 63 | +| **BackgroundColor** |The background color of the legend area. Can take a common color name or a hex value.| |
| 64 | +| **Position** |The position of the chart legend relative to the plot area. An enumeration (Telerik.Web.UI.HtmlChart.ChartLegendPosition) with the following values: Bottom, Left, Right, Top.| |
| 65 | +| **Reversed** |Defines whether the items in the legend will be reversed. Values are True or False.| |
| 66 | +| **TextStyle** |Controls the appearance of the labels in this element. See the [Labels and Titles Font Settings]({%slug htmlchart/appearance-and-styling/labels-and-titles-font-settings%}) article for detailed information.| |
| 67 | +| **Visible** |Defines whether the chart legend is shown. Values are True or False.| |
| 68 | + |
| 69 | +## Attribute Property in Main Tag > PlotArea > Appearance > FillStyle |
| 70 | + |
| 71 | + |
| 72 | +| **Name** | **Description** | |
| 73 | +| ------ | ------ | |
| 74 | +| **BackgroundColor** |The background color of the plot area. Can take a common color name or a hex value.| |
| 75 | + |
| 76 | +## Attribute Properties in Main Tag > PlotArea > Appearance > TextStyle |
| 77 | + |
| 78 | + |
| 79 | +| **Name** | **Description** | |
| 80 | +| ------ | ------ | |
| 81 | +| **Margin** |Takes from one to four integers that specify all the margins the PlotArea will have in pixels.| |
| 82 | + |
| 83 | +For example: |
| 84 | + |
| 85 | +* **Margin="15"** —all four margins are 15px. |
| 86 | + |
| 87 | +* **Margin="15 30"** —top and bottom margins are 15px; right and left margins are 30px. |
| 88 | + |
| 89 | +* **Margin="15 30 45"** —top margin is 15px; right and left margins are 30px; bottom margin is 45px. |
| 90 | + |
| 91 | +* **Margin="15 30 45 60"** —top margin is 15px; right margin is 30px; bottom margin is 45px; left margin is 60px; |
| 92 | + |
| 93 | +## Attribute Properties in Main Tag > PlotArea > CommonTooltipsAppearance |
| 94 | + |
| 95 | + |
| 96 | +| **Name** | **Description** | |
| 97 | +| ------ | ------ | |
| 98 | +| **BackgroundColor** |The background color of the tooltips for the items from this series. Can take a common color name or a hex value. If it is not set explicitly the control will pick one according to currenly used Skin.| |
| 99 | +| **Color** |The text color of the tooltips for the items from this series. Can take a common color name or a hex value. If it is not set explicitly the control will pick one according to the currently used Skin.| |
| 100 | +| **ClientTemplate** |A string for the client template that will be applied to the tooltips when they render. It can use any column from the data source given to the chart through the following syntax: **#=dataItem.ColumnName#** where the string delimited inside #=.....# is the expression to be evaluated. The tooltips are HTML so HTML can be used outside of the expression tags. See [here]({%slug htmlchart/functionality/clienttemplate/overview%}) for more information.| |
| 101 | +| **DataFormatString** |The format string that will form the labels' text. The **{0}** placeholder is used to denote the **Y** value of the item. For the **ScatterSeries** and **ScatterLineSeries** you can use **{1}** for the **X** value. Although **CandlestickSeries** ToolTips have already predefined pattern by design it can be modified through **{0}** , **{1}** , **{2}** , **{3}** and **{4}** placeholders that denotes accordingly the Open, High, Low, Close and the corresponding XAxis item's value.| |
| 102 | +| **Shared** |Defines whether the chart will display a single tooltip for every category. Values are True or False.| |
| 103 | +| **SharedTemplate** |A string for the shared template that will be applied to the tooltips when they render. It can use the **points** (the category points) and **category** (the category name) fields through the following syntax: **#= category #, #= points[0].series.name#, #= points[0].value #** where the string delimited inside #=.....# is the expression to be evaluated. The tooltips are HTML so HTML can be used outside of the expression tags. See [here]({%slug htmlchart/functionality/clienttemplate/overview%}) for more information.| |
| 104 | +| **Visible** |Defines whether the tooltips will be shown. Values are True or False.| |
| 105 | + |
| 106 | +## See Also |
| 107 | + |
| 108 | + * [Visual Structure of the RadHtmlChart Control’s Tag Hierarchy]({%slug htmlchart/server-side-programming/overview%}) |
| 109 | + |
| 110 | + * [Configuring Tags in the RadHtmlChart Series]({%slug htmlchart/server-side-programming/series-configuration%}) |
| 111 | + |
| 112 | + * [Configuring Tags in the RadHtmlChart Series]({%slug htmlchart/server-side-programming/series-items-configuration%}) |
| 113 | + |
| 114 | + * [Configuring PlotArea Element Axes of the RadHtmlChart]({%slug htmlchart/server-side-programming/axes-configuration%}) |
| 115 | + |
| 116 | + * [Labels and Titles Font Settings in RadHtmlChart]({%slug htmlchart/appearance-and-styling/labels-and-titles-font-settings%}) |
0 commit comments