|
| 1 | +--- |
| 2 | +title: Line Charts |
| 3 | +page_title: Line Charts | Kendo UI Charts HtmlHelper for ASP.NET Core |
| 4 | +description: "Learn how to define and configure Kendo UI Line Charts." |
| 5 | +slug: linecharts_aspnetcore_htmlhelper |
| 6 | +--- |
| 7 | + |
| 8 | +# Line Charts |
| 9 | + |
| 10 | +The [Kendo UI Line Chart HtmlHelper for ASP.NET Core](https://demos.telerik.com/aspnet-core/line-charts/index) is suitable for displaying quantitative data by using continuous lines passing through points defined by the values of their items. It is useful for rendering a trend over time and comparing several sets of similar data. |
| 11 | +## Configuration |
| 12 | + |
| 13 | +Use `Line` and `VerticalLine` in the Series configuration to create a Line series in the Chart helper. |
| 14 | + |
| 15 | +### Axes |
| 16 | + |
| 17 | +Axes are configured through the `CategoryAxis` and `ValueAxis` settings. Multiple value axes are supported. |
| 18 | + |
| 19 | +###### Example |
| 20 | + |
| 21 | + @(Html.Kendo().Chart() |
| 22 | + .Name("chart") |
| 23 | + .Title("Internet Users") |
| 24 | + .Legend(legend => legend |
| 25 | + .Position(ChartLegendPosition.Bottom) |
| 26 | + ) |
| 27 | + .Series(series => |
| 28 | + { |
| 29 | + series.Line(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World"); |
| 30 | + series.Line(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States"); |
| 31 | + }) |
| 32 | + .CategoryAxis(axis => axis |
| 33 | + .Categories("2005", "2006", "2007", "2008", "2009") |
| 34 | + .MajorGridLines(lines => lines.Visible(false)) |
| 35 | + ) |
| 36 | + .ValueAxis(axis => axis |
| 37 | + .Numeric().Labels(labels => labels.Format("{0}%")) |
| 38 | + ) |
| 39 | + ) |
| 40 | + |
| 41 | + |
| 42 | +This configuration results in the Line Chart below. |
| 43 | + |
| 44 | +**Figure 1: A sample Line Chart** |
| 45 | + |
| 46 | + |
| 47 | + |
| 48 | +### Line Styles |
| 49 | + |
| 50 | +Kendo UI Line Charts support rendering of the lines between points using different styles. You can set the line style using the `Style` configuration in the `SeriesDefaults` common settings: |
| 51 | + |
| 52 | +``` |
| 53 | + .SeriesDefaults(seriesDefaults => |
| 54 | + seriesDefaults.Line().Style(ChartLineStyle.Smooth) |
| 55 | + ) |
| 56 | +``` |
| 57 | + |
| 58 | +or for each Line series individually: |
| 59 | + |
| 60 | +``` |
| 61 | + .Series(series => |
| 62 | + { |
| 63 | + series.Line(new double[] { 15.7, 26.7, 20, 23.5, 26.6 }).Name("World").Style(ChartLineStyle.Smooth); |
| 64 | + series.Line(new double[] { 67.96, 68.93, 75, 54, 78 }).Name("United States").Style(ChartLineStyle.Smooth); |
| 65 | + }) |
| 66 | +``` |
| 67 | + |
| 68 | +The supported styles are: |
| 69 | + |
| 70 | +* Normal—This is the default style. It produces a straight line between data points. |
| 71 | +* Step—This style renders the connection between data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes. |
| 72 | +* Smooth—This style causes the Line Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines. |
| 73 | + |
| 74 | +**Figure 2: A step-line Line Chart** |
| 75 | + |
| 76 | + |
| 77 | + |
| 78 | +**Figure 3: A smooth-line Line Chart** |
| 79 | + |
| 80 | + |
| 81 | + |
| 82 | +### Types of Lines |
| 83 | + |
| 84 | +The Chart draws Line series as a solid line by default. You can configure the line to be drawn using different dash styles using the `DashType` setting: |
| 85 | + |
| 86 | +``` |
| 87 | + .Series(series => |
| 88 | + { |
| 89 | + series.Line(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World").DashType(ChartDashType.Dot); |
| 90 | + series.Line(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States"); |
| 91 | + }) |
| 92 | +``` |
| 93 | + |
| 94 | +**Figure 4: A dotted Line Series** |
| 95 | + |
| 96 | + |
| 97 | + |
| 98 | +### Markers |
| 99 | + |
| 100 | +The series markers are the visuals that represent the point value in the Line series. You can customize or hide them using the `Markers` configuration. |
| 101 | + |
| 102 | +``` |
| 103 | + series.Line(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World") |
| 104 | + .Markers(m=>m |
| 105 | + .Type(ChartMarkerShape.Square) |
| 106 | + .Rotation(45) |
| 107 | + .Background("yellow") |
| 108 | + ); |
| 109 | +``` |
| 110 | + |
| 111 | +**Figure 5: A Line Chart with custom markers** |
| 112 | + |
| 113 | + |
| 114 | + |
| 115 | +You can also draw completely custom markers for the Line series through the `Visual` setting, as shown in the [Custom Visuals](https://demos.telerik.com/aspnet-core/line-charts/visuals) demo. |
| 116 | + |
| 117 | +## See Also |
| 118 | + |
| 119 | +Other articles on Kendo UI Charts and chart types: |
| 120 | + |
| 121 | +* [Overview of the Kendo UI Chart Html Helper for ASP.NET Core ]({% slug htmlhelpers_charts_aspnetcore %}) |
| 122 | +* [Area Charts]({% slug areacharts_aspnetcore_htmlhelper %}) |
| 123 | +* [Bubble Charts]({% slug bubblecharts_aspnetcore_htmlhelper %}) |
| 124 | +* [BoxPlot Charts]({% slug boxplotcharts_aspnetcore_htmlhelper %}) |
| 125 | +* [Bar Charts]({% slug barcharts_aspnetcore_htmlhelper %}) |
| 126 | +* [Pie Charts]({% slug piecharts_aspnetcore_htmlhelper %}) |
| 127 | +* [Stock Charts]({% slug overview_stockcharthelper_aspnetcore %}) |
| 128 | +* [TreeMap]({% slug overview_treemaphelper_aspnetcore %}) |
| 129 | +* [Chart JavaScript API Reference](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart) |
0 commit comments