Skip to content

Commit a26985a

Browse files
xristianstefanovxristianstefanov
authored
docs(charts): add kb for drawing horizontal and vertical lines (#1747)
* docs(charts): add kb for drawing horizontal and vertical lines * docs(charts): fixes as per comments
1 parent f0648a2 commit a26985a

File tree

1 file changed

+160
-0
lines changed

1 file changed

+160
-0
lines changed

‎knowledge-base/chart-draw-horizontal-vertical-lines.md

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
title: Draw Horizontal and Vertical Lines in a Blazor Chart
3+
description: How to draw horizontal and vertical lines in Charts. Draw vertical lines in Charts with line series. Draw horizontal lines in Charts with plot bands.
4+
type: how-to
5+
page_title: How to Draw Horizontal and Vertical Lines in Charts
6+
slug: chart-kb-draw-horizontal-and-vertical-lines
7+
position:
8+
tags: telerik, blazor, chart, draw, horizontal, vertical, lines
9+
ticketid: 1511761, 1569732
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td>Product</td>
19+
<td>Charts for Blazor</td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
24+
25+
## Description
26+
27+
This KB article answers the following questions:
28+
29+
* How to draw horizontal and vertical lines in Telerik Blazor Charts?
30+
* How to put pins or markers in Telerik Blazor Charts?
31+
* Is it possible to add limits or thresholds on the Telerik Blazor Chart?
32+
33+
## Solution
34+
35+
To configure the Chart for drawing horizontal and vertical lines, you can use [plot bands]({%slug chart-plot-bands%}) or additional [line series]({%slug components/chart/types/line%}).
36+
37+
### Using Plot Bands
38+
39+
Steps for drawing vertical and horizontal lines with [plot bands]({%slug chart-plot-bands%}):
40+
41+
1. Add `PlotBand` instances inside the `PlotBands` collection of a Chart axis.
42+
2. Provide a valid CSS color to the `Color` parameter.
43+
3. [Set the `From` and `To`]({%slug chart-plot-bands%}#setting-from-and-to) plot band parameters.
44+
45+
>caption Drawing Horizontal and Vertical lines with Plot Bands
46+
47+
`````CSHTML
48+
<TelerikChart>
49+
<ChartTitle Text="Unrecoverable Errors Per Minute vs. Signal Level"></ChartTitle>
50+
51+
<ChartSeriesItems>
52+
<ChartSeries Type="ChartSeriesType.Scatter"
53+
Data="@SeriesData"
54+
Name="APSK modulation"
55+
XField="@nameof(ModelData.Strength)"
56+
YField="@nameof(ModelData.Errors)">
57+
</ChartSeries>
58+
</ChartSeriesItems>
59+
60+
<ChartXAxes>
61+
<ChartXAxis Max="-30" AxisCrossingValue="@(new object[] { -100 })">
62+
<ChartXAxisTitle Text="Signal Strength, dBm"></ChartXAxisTitle>
63+
<ChartXAxisPlotBands>
64+
<ChartXAxisPlotBand From="-89.7" To="-89.5" Color="blue" />
65+
<ChartXAxisPlotBand From="-50" To="-49.5" Color="orange" />
66+
</ChartXAxisPlotBands>
67+
</ChartXAxis>
68+
</ChartXAxes>
69+
70+
<ChartYAxes>
71+
<ChartYAxis Max="20">
72+
<ChartYAxisTitle Text="Error count"></ChartYAxisTitle>
73+
<ChartYAxisPlotBands>
74+
<ChartYAxisPlotBand From="1.5" To="1.7" Color="green"></ChartYAxisPlotBand>
75+
<ChartYAxisPlotBand From="18.5" To="18.6" Color="red"></ChartYAxisPlotBand>
76+
</ChartYAxisPlotBands>
77+
</ChartYAxis>
78+
</ChartYAxes>
79+
</TelerikChart>
80+
81+
@code {
82+
#region PlotBandsData
83+
private List<ModelData> SeriesData { get; set; }
84+
85+
protected override void OnInitialized()
86+
{
87+
SeriesData = new List<ModelData>();
88+
89+
var rnd = new Random();
90+
91+
for (int i = 0; i < 60; i++)
92+
{
93+
SeriesData.Add(new ModelData
94+
{
95+
Strength = rnd.Next(-90 + i / 3, -90 + i),
96+
Errors = rnd.Next(i / 20, i / 3)
97+
});
98+
}
99+
100+
base.OnInitialized();
101+
}
102+
103+
public class ModelData
104+
{
105+
public double Strength { get; set; }
106+
public double Errors { get; set; }
107+
}
108+
#endregion
109+
}
110+
`````
111+
112+
### Using Additional Line Series
113+
114+
Steps for drawing horizontal and vertical lines with additional [Lines Series]({%slug components/chart/types/line%}):
115+
116+
1. Add `ChartSeries` instances of type `ChartSeriesType.Line` based on the needed number of lines.
117+
2. Set data for the lines based on the information shown from the main Chart.
118+
119+
>caption Drawing Horizontal and Vertical lines with additional Lines Chart
120+
121+
````CSHTML
122+
<TelerikChart>
123+
<ChartSeriesItems>
124+
<ChartSeries Type="ChartSeriesType.Column" Name="Column 1" Data="@firstColumnTypeData">
125+
</ChartSeries>
126+
<ChartSeries Type="ChartSeriesType.Column" Name="Column 2" Data="@secondColumnTypeData">
127+
</ChartSeries>
128+
<ChartSeries Type="ChartSeriesType.Line" Name="Line 1" Data="@firstLineTypeData">
129+
</ChartSeries>
130+
<ChartSeries Type="ChartSeriesType.Line" Name="Line 2" Data="@secondLineTypeData">
131+
</ChartSeries>
132+
</ChartSeriesItems>
133+
134+
<ChartCategoryAxes>
135+
<ChartCategoryAxis Categories="@xColumnAxisItems"></ChartCategoryAxis>
136+
</ChartCategoryAxes>
137+
138+
<ChartTitle Text="Draw Horizontal and Vertical Lines"></ChartTitle>
139+
140+
<ChartLegend Position="ChartLegendPosition.Right">
141+
</ChartLegend>
142+
</TelerikChart>
143+
144+
@code {
145+
#region LinesData
146+
private List<object> firstColumnTypeData = new List<object>() { 10, 2, 5, 6 };
147+
private List<object> secondColumnTypeData = new List<object>() { 5, 8, 2, 7 };
148+
149+
private List<object> firstLineTypeData = new List<object>() { 8, 8, 8, 6 };
150+
private List<object> secondLineTypeData = new List<object>() { 5, 8, 2, 7 };
151+
152+
private string[] xColumnAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
153+
#endregion
154+
}
155+
````
156+
157+
## See Also
158+
159+
* [Charts Plot Bands]({%slug chart-plot-bands%})
160+
* [Lines Chart](https://demos.telerik.com/blazor-ui/chart/line-chart)

0 commit comments

Comments
 (0)