diff --git a/knowledge-base/chart-draw-horizontal-vertical-lines.md b/knowledge-base/chart-draw-horizontal-vertical-lines.md new file mode 100644 index 0000000000..b22c677b62 --- /dev/null +++ b/knowledge-base/chart-draw-horizontal-vertical-lines.md @@ -0,0 +1,160 @@ +--- +title: Draw Horizontal and Vertical Lines in a Blazor Chart +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. +type: how-to +page_title: How to Draw Horizontal and Vertical Lines in Charts +slug: chart-kb-draw-horizontal-and-vertical-lines +position: +tags: telerik, blazor, chart, draw, horizontal, vertical, lines +ticketid: 1511761, 1569732 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductCharts for Blazor
+ + +## Description + +This KB article answers the following questions: + +* How to draw horizontal and vertical lines in Telerik Blazor Charts? +* How to put pins or markers in Telerik Blazor Charts? +* Is it possible to add limits or thresholds on the Telerik Blazor Chart? + +## Solution + +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%}). + +### Using Plot Bands + +Steps for drawing vertical and horizontal lines with [plot bands]({%slug chart-plot-bands%}): + +1. Add `PlotBand` instances inside the `PlotBands` collection of a Chart axis. +2. Provide a valid CSS color to the `Color` parameter. +3. [Set the `From` and `To`]({%slug chart-plot-bands%}#setting-from-and-to) plot band parameters. + +>caption Drawing Horizontal and Vertical lines with Plot Bands + +`````CSHTML + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + #region PlotBandsData + private List SeriesData { get; set; } + + protected override void OnInitialized() + { + SeriesData = new List(); + + var rnd = new Random(); + + for (int i = 0; i < 60; i++) + { + SeriesData.Add(new ModelData + { + Strength = rnd.Next(-90 + i / 3, -90 + i), + Errors = rnd.Next(i / 20, i / 3) + }); + } + + base.OnInitialized(); + } + + public class ModelData + { + public double Strength { get; set; } + public double Errors { get; set; } + } + #endregion +} +````` + +### Using Additional Line Series + +Steps for drawing horizontal and vertical lines with additional [Lines Series]({%slug components/chart/types/line%}): + +1. Add `ChartSeries` instances of type `ChartSeriesType.Line` based on the needed number of lines. +2. Set data for the lines based on the information shown from the main Chart. + +>caption Drawing Horizontal and Vertical lines with additional Lines Chart + +````CSHTML + + + + + + + + + + + + + + + + + + + + + + +@code { + #region LinesData + private List firstColumnTypeData = new List() { 10, 2, 5, 6 }; + private List secondColumnTypeData = new List() { 5, 8, 2, 7 }; + + private List firstLineTypeData = new List() { 8, 8, 8, 6 }; + private List secondLineTypeData = new List() { 5, 8, 2, 7 }; + + private string[] xColumnAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; + #endregion +} +```` + +## See Also + +* [Charts Plot Bands]({%slug chart-plot-bands%}) +* [Lines Chart](https://demos.telerik.com/blazor-ui/chart/line-chart)