Skip to content

Commit 4051b6c

Browse files
xristianstefanovyordan-mitev
xristianstefanov
and
yordan-mitev
authored
[4.4] docs(charts): add pan and zoom docs (#1533)
* docs(charts): add pan and zoom docs * docs(charts): fixes as per comments * docs: edit pan and zoom --------- Co-authored-by: Yordan <yordan.mitev@progress.com>
1 parent 12ef204 commit 4051b6c

File tree

3 files changed

+425
-1
lines changed

3 files changed

+425
-1
lines changed

‎_config.yml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,9 +159,12 @@ navigation:
159159
"*components/chart/types":
160160
title: "Types"
161161
position: 15
162+
"*components/chart/pan-and-zoom":
163+
title: "Pan and Zoom"
164+
position: 32
162165
"*components/chart/tooltip":
163166
title: "Tooltips"
164-
position: 32
167+
position: 31
165168
"*components/stockchart/types":
166169
title: "Types"
167170
position: 12

‎components/chart/pan-and-zoom/pan.md‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
title: Pan
3+
page_title: Chart - Pan
4+
description: Learn more about the Pan feature of the Telerik UI for Blazor Chart component and explore the available examples.
5+
slug: components/chart/pan
6+
tags: telerik, blazor, chart, event, pan, zoom
7+
published: true
8+
position: 0
9+
---
10+
11+
# Pan
12+
13+
The `Pan` feature allows you to navigate through the Telerik Blazor Chart component. This functionality works with both `category` and `numeric` series.
14+
15+
## Configuring the Pan Settings
16+
17+
To enable panning in the Blazor Chart:
18+
19+
1. Set the boolean `Enabled` parameter in the corresponding `ChartPannable` inner tag of the Chart.
20+
2. Set a range for the axis through the `Min` and `Max` parameters in the corresponding `ChartCategoryAxis` inner tag.
21+
22+
Charts can be panned in all directions.
23+
24+
To perform panning, do either of the following:
25+
26+
* Drag the plot area of the Chart.
27+
* Hold the assigned panning key and drag the plot area. This method requires you to [specify a key for panning](#specifying-a-key-for-panning).
28+
29+
>caption Chart with enabled panning
30+
31+
````CSHTML
32+
@* This code snippet showcases an example of pannable Chart. *@
33+
<TelerikChart>
34+
<ChartPannable Enabled="true"></ChartPannable>
35+
36+
<ChartSeriesItems>
37+
<ChartSeries Type="ChartSeriesType.Column"
38+
Name="Product 1"
39+
Data="@Data"
40+
Field="@nameof(ChartSeriesData.ProductSales)"
41+
CategoryField="@nameof(ChartSeriesData.Year)">
42+
</ChartSeries>
43+
44+
<ChartCategoryAxes>
45+
<ChartCategoryAxis Min="1" Max="5"></ChartCategoryAxis>
46+
</ChartCategoryAxes>
47+
</ChartSeriesItems>
48+
</TelerikChart>
49+
50+
@code {
51+
List<ChartSeriesData> Data { get; set; } = new List<ChartSeriesData>();
52+
53+
protected override Task OnInitializedAsync()
54+
{
55+
Data = ChartSeriesData.GenerateData();
56+
return base.OnInitializedAsync();
57+
}
58+
59+
public class ChartSeriesData
60+
{
61+
public int ProductSales { get; set; }
62+
public DateTime Year { get; set; }
63+
64+
public static List<ChartSeriesData> GenerateData()
65+
{
66+
List<ChartSeriesData> data = new List<ChartSeriesData>();
67+
68+
for (int i = 1; i <= 10; i++)
69+
{
70+
var dataItem = new ChartSeriesData
71+
{
72+
ProductSales = i,
73+
Year = new DateTime(2000 + i, 3, i),
74+
};
75+
76+
data.Add(dataItem);
77+
}
78+
79+
return data;
80+
}
81+
}
82+
}
83+
````
84+
85+
### Specifying a Key for Panning
86+
87+
To specify the key for panning, use the `Key` parameter within the `ChartPannable` tag and pass the `ChartPannableKey` enum, which provides the following options:
88+
89+
* (default) `None`—No key is required
90+
* `Ctrl`
91+
* `Shift`
92+
* `Alt`
93+
94+
### Disabling Panning on a Selected Axis
95+
96+
To specify an axis that user cannot pan, use the `Lock` parameter within the `ChartPannable` tag and pass the `ChartAxisLock` enum, which provides the following options:
97+
98+
* (default) `None`—None of the series are locked and users can pan by either X or Y axis.
99+
* `X`—The X axis is locked, users can pan only by Y axis.
100+
* `Y`—The Y axis is locked, users can pan only by X axis.
101+
102+
103+
>caption Chart with specified panning key and locked axis
104+
105+
````CSHTML
106+
@* This code snippet showcases an example of pannable Chart with specified modifier key and locked Axis. *@
107+
Press CTRL + Click and Drag.
108+
<TelerikChart>
109+
<ChartPannable Enabled="true"
110+
Lock="@ChartAxisLock.Y"
111+
Key="@ChartPannableKey.Ctrl">
112+
</ChartPannable>
113+
114+
<ChartSeriesItems>
115+
<ChartSeries Type="ChartSeriesType.Column"
116+
Name="Product 1"
117+
Data="@Data"
118+
Field="@nameof(ChartSeriesData.ProductSales)"
119+
CategoryField="@nameof(ChartSeriesData.Year)">
120+
</ChartSeries>
121+
122+
<ChartCategoryAxes>
123+
<ChartCategoryAxis Min="1" Max="5"></ChartCategoryAxis>
124+
</ChartCategoryAxes>
125+
</ChartSeriesItems>
126+
</TelerikChart>
127+
128+
@code {
129+
List<ChartSeriesData> Data { get; set; } = new List<ChartSeriesData>();
130+
131+
protected override Task OnInitializedAsync()
132+
{
133+
Data = ChartSeriesData.GenerateData();
134+
return base.OnInitializedAsync();
135+
}
136+
137+
public class ChartSeriesData
138+
{
139+
public int ProductSales { get; set; }
140+
public DateTime Year { get; set; }
141+
142+
public static List<ChartSeriesData> GenerateData()
143+
{
144+
List<ChartSeriesData> data = new List<ChartSeriesData>();
145+
146+
for (int i = 1; i <= 10; i++)
147+
{
148+
var dataItem = new ChartSeriesData
149+
{
150+
ProductSales = i,
151+
Year = new DateTime(2000 + i, 3, i),
152+
};
153+
154+
data.Add(dataItem);
155+
}
156+
157+
return data;
158+
}
159+
}
160+
}
161+
````
162+
163+
## See Also
164+
165+
* [Live Demos: Chart - Pan and Zoom](https://demos.telerik.com/blazor-ui/chart/pan-zoom)

0 commit comments

Comments
 (0)