Skip to content

Commit 73d8ea8

Browse files
svdimitrdimodiyordan-mitev
authored
Chart and StockChart documentation (#1482)
* docs(chart): add information on title and subtitle * docs(stockchart): format and template * docs(stockchart): navigator position * docs(stockchart): label rotation * Update components/stockchart/labels-template-and-format.md Co-authored-by: Yordan <[email protected]> * Update components/stockchart/labels-template-and-format.md Co-authored-by: Yordan <[email protected]> * Update components/stockchart/labels-template-and-format.md Co-authored-by: Yordan <[email protected]> * Update components/stockchart/navigator.md Co-authored-by: Yordan <[email protected]> * Update components/stockchart/labels-template-and-format.md Co-authored-by: Yordan <[email protected]> * docs(stockchart): Refactor article sections --------- Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Yordan <[email protected]>
1 parent 4a4206d commit 73d8ea8

File tree

3 files changed

+257
-1
lines changed

3 files changed

+257
-1
lines changed

‎components/chart/overview.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,13 @@ Basic chart and common settings/elements
7272

7373
@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings)
7474

75+
## Chart Title
76+
77+
You can add a short description of the Chart's purpose by using the `ChartTitle` tag and the `Text` parameter.
78+
79+
## Chart Subtitle
80+
81+
You can add a descriptive text that enriches the [Title](#title) by adding the `ChartSubtitle` and assigning a value for the `Text` parameter.
7582

7683
## Chart Size
7784

‎components/stockchart/labels-template-and-format.md

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
---
2+
title: Label Template and Format
3+
page_title: StockChart - Label Template and Format
4+
description: Learn how to use the Label Template in the Blazor StockChart and to format the labels of the axes and the navigator.
5+
slug: stockchart-labels-format-template
6+
tags: telerik,blazor,stock,stockchart,chart,label,template,format,customize
7+
published: true
8+
position: 22
9+
---
10+
11+
# Label Template and Format
12+
13+
The StockChart for Blazor can render labels on the axes and the navigator. You can control these texts not only through the values you bind to data but also through [format strings](#format-strings) or [templates](#templates).
14+
15+
You can also rotate the labels by setting the `Angle` parameter to a numeric value the labels will rotate to.
16+
17+
In this article:
18+
* [Format Strings](#format-strings)
19+
* [Templates](#templates)
20+
21+
## Format Strings
22+
23+
You can use the `Format` parameter to apply standard [numeric format strings](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings) and [date and time format strings](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings).
24+
25+
>caption Format the labels on the Value and Category Axes
26+
27+
````CSHTML
28+
Standard number format strings and rotate the labels of the Category Axis
29+
30+
<TelerikStockChart Width="700px"
31+
Height="450px"
32+
DateField="@nameof(StockDataPoint.Date)">
33+
34+
<StockChartCategoryAxes>
35+
<StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months">
36+
<StockChartCategoryAxisLabels Format="{0:D}"></StockChartCategoryAxisLabels>
37+
<StockChartCategoryAxisLabelsRotation Angle="30"></StockChartCategoryAxisLabelsRotation>
38+
</StockChartCategoryAxis>
39+
</StockChartCategoryAxes>
40+
41+
<StockChartValueAxes>
42+
<StockChartValueAxis>
43+
<StockChartValueAxisLabels Format="{0:C0}"></StockChartValueAxisLabels>
44+
</StockChartValueAxis>
45+
</StockChartValueAxes>
46+
47+
<StockChartSeriesItems>
48+
<StockChartSeries Type="StockChartSeriesType.Candlestick"
49+
Name="Product 1"
50+
Data="@StockChartProduct1Data"
51+
OpenField="@nameof(StockDataPoint.Open)"
52+
CloseField="@nameof(StockDataPoint.Close)"
53+
HighField="@nameof(StockDataPoint.High)"
54+
LowField="@nameof(StockDataPoint.Low)">
55+
</StockChartSeries>
56+
</StockChartSeriesItems>
57+
58+
<StockChartNavigator>
59+
<StockChartNavigatorCategoryAxisLabels Format="" Template=""></StockChartNavigatorCategoryAxisLabels>
60+
<StockChartNavigatorSeriesItems>
61+
<StockChartNavigatorSeries Type="StockChartSeriesType.Line"
62+
Name="Product 1"
63+
Data="@StockChartProduct1Data"
64+
Field="@(nameof(StockDataPoint.High))"
65+
CategoryField="@(nameof(StockDataPoint.Date))">
66+
</StockChartNavigatorSeries>
67+
</StockChartNavigatorSeriesItems>
68+
</StockChartNavigator>
69+
70+
</TelerikStockChart>
71+
72+
@code {
73+
public List<StockDataPoint> StockChartProduct1Data { get; set; }
74+
75+
protected override async Task OnInitializedAsync()
76+
{
77+
await GenerateChartData();
78+
}
79+
80+
public async Task GenerateChartData()
81+
{
82+
StockChartProduct1Data = new List<StockDataPoint>()
83+
{
84+
new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
85+
new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
86+
new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
87+
new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200),
88+
};
89+
90+
await Task.FromResult(StockChartProduct1Data);
91+
}
92+
93+
public class StockDataPoint
94+
{
95+
public StockDataPoint() { }
96+
97+
public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
98+
{
99+
Date = date;
100+
Open = open;
101+
Close = close;
102+
High = high;
103+
Low = low;
104+
Volume = volume;
105+
}
106+
public DateTime Date { get; set; }
107+
108+
public decimal Open { get; set; }
109+
110+
public decimal Close { get; set; }
111+
112+
public decimal High { get; set; }
113+
114+
public decimal Low { get; set; }
115+
116+
public int Volume { get; set; }
117+
}
118+
}
119+
````
120+
121+
## Templates
122+
123+
You can use the `Template` parameter to apply more complex formatting to the labels in the StockChart for Blazor. The syntax of the template is based on the [Kendo Templates](https://docs.telerik.com/kendo-ui/framework/templates/overview). The labels are not HTML elements so the `Template` cannot contain arbitrary HTML elements. If you want to add a new line, use the `\n` symbol instead of a block HTML element.
124+
125+
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 examples 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 and the [Label Format - Complex Logic](https://github.com/telerik/blazor-ui/tree/master/chart/label-template) sample project.
126+
127+
### Template Fields
128+
129+
In a *category axis* label template, you can use the following fields:
130+
131+
* `value` - the category value
132+
* `format` - the default format of the label
133+
134+
<!--* `dataItem` - the data item, in case a field has been specified. If the category does not have a corresponding item in the data then an empty object will be passed.-->
135+
<!--* culture - the default culture (if set) on the label-->
136+
137+
In a *value axis* label template, you can use the following fields:
138+
139+
* `value` - the label value
140+
141+
### Example
142+
143+
>tip The template syntax works the same way for the Telerik UI for Blazor Chart and StockChart.
144+
145+
>caption Custom templates in labels
146+
147+
````CSHTML
148+
Label templates
149+
150+
<TelerikStockChart Width="700px"
151+
Height="450px"
152+
DateField="@nameof(StockDataPoint.Date)">
153+
154+
<StockChartCategoryAxes>
155+
<StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months">
156+
<StockChartCategoryAxisLabels Template="#= value.toLocaleDateString('en-US') #"></StockChartCategoryAxisLabels>
157+
</StockChartCategoryAxis>
158+
</StockChartCategoryAxes>
159+
160+
<StockChartValueAxes>
161+
<StockChartValueAxis>
162+
<StockChartValueAxisLabels Template="#= value#"></StockChartValueAxisLabels>
163+
</StockChartValueAxis>
164+
</StockChartValueAxes>
165+
166+
<StockChartSeriesItems>
167+
<StockChartSeries Type="StockChartSeriesType.Candlestick"
168+
Name="Product 1"
169+
Data="@StockChartProduct1Data"
170+
OpenField="@nameof(StockDataPoint.Open)"
171+
CloseField="@nameof(StockDataPoint.Close)"
172+
HighField="@nameof(StockDataPoint.High)"
173+
LowField="@nameof(StockDataPoint.Low)">
174+
</StockChartSeries>
175+
</StockChartSeriesItems>
176+
177+
<StockChartNavigator>
178+
<StockChartNavigatorCategoryAxisLabels Format="" Template=""></StockChartNavigatorCategoryAxisLabels>
179+
<StockChartNavigatorSeriesItems>
180+
<StockChartNavigatorSeries Type="StockChartSeriesType.Line"
181+
Name="Product 1"
182+
Data="@StockChartProduct1Data"
183+
Field="@(nameof(StockDataPoint.High))"
184+
CategoryField="@(nameof(StockDataPoint.Date))">
185+
</StockChartNavigatorSeries>
186+
</StockChartNavigatorSeriesItems>
187+
</StockChartNavigator>
188+
189+
<StockChartLegend>
190+
<StockChartLegendLabels></StockChartLegendLabels>
191+
</StockChartLegend>
192+
193+
</TelerikStockChart>
194+
195+
@code {
196+
public List<StockDataPoint> StockChartProduct1Data { get; set; }
197+
198+
protected override async Task OnInitializedAsync()
199+
{
200+
await GenerateChartData();
201+
}
202+
203+
public async Task GenerateChartData()
204+
{
205+
StockChartProduct1Data = new List<StockDataPoint>()
206+
{
207+
new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
208+
new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
209+
new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
210+
new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200),
211+
};
212+
213+
await Task.FromResult(StockChartProduct1Data);
214+
}
215+
216+
public class StockDataPoint
217+
{
218+
public StockDataPoint() { }
219+
220+
public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
221+
{
222+
Date = date;
223+
Open = open;
224+
Close = close;
225+
High = high;
226+
Low = low;
227+
Volume = volume;
228+
}
229+
public DateTime Date { get; set; }
230+
231+
public decimal Open { get; set; }
232+
233+
public decimal Close { get; set; }
234+
235+
public decimal High { get; set; }
236+
237+
public decimal Low { get; set; }
238+
239+
public int Volume { get; set; }
240+
}
241+
}
242+
````
243+
244+
245+
## See Also
246+
247+
* [Live Demos: StockChart](https://demos.telerik.com/blazor-ui/stockchart/overview)

‎components/stockchart/navigator.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,8 @@ The Navigator is defined closely to the way the charts are. As such you can use
163163

164164
To programatically set a time interval to the `Navigator` upon initialization use the `From` and `To` parameters of the `<StockChartNavigatorSelect>` and pass valid `DateTime` values according to your data.
165165

166+
To control whether the Navigator renders below or on top of the Stock Chart, set the `Position` parameter to a member of the `StockChartNavigatorPosition` enum.
167+
166168
You can control from which side (or both) the data navigation with shorten the time interval when the users cursor is located inside Navigator and is using the mouse wheel. To set it use the `Zoom` parameter of the `<StockChartNavigatorSelectMousewheel>`, child of `<StockChartNavigatorSelect>` to a member of the `ChartMousewheelZoom` enum:
167169
* `ChartMousewheelZoom.Left`
168170
* `ChartMousewheelZoom.Right`
@@ -177,7 +179,7 @@ You can control from which side (or both) the data navigation with shorten the t
177179
Height="450px"
178180
DateField="@nameof(StockDataPoint.Date)">
179181
180-
<StockChartNavigator>
182+
<StockChartNavigator Position="@StockChartNavigatorPosition.Top">
181183
182184
<StockChartNavigatorCategoryAxis>
183185
<StockChartNavigatorCategoryAxisLabels Color="#008B8B" Step="2">

0 commit comments

Comments
 (0)