Line
Documentation
Line chart series types help visualize data trends over specified intervals. In this example, you can switch between the line, stacked line and full-stacked line series types. Stacked line series help visualize multiple series and compare the manner in which each series contributes to the total aggregate value for specific arguments. Full-stacked line series help compare the percentage value of multiple line series for each argument.
www.geohive.com
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
<div id="chart-demo">
@(Html.DevExtreme().Chart()
.ID("line-chart")
.Palette(VizPalette.Violet)
.CommonSeriesSettings(s => s
.ArgumentField("Country")
.Type(SeriesType.Line)
)
.Margin(m => m.Bottom(20))
.ArgumentAxis(a => a
.ValueMarginsEnabled(false)
.DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels)
.Grid(g => g.Visible(true))
)
.Series(s => {
s.Add().ValueField("Hydro").Name("Hydro-electric");
s.Add().ValueField("Oil").Name("Oil");
s.Add().ValueField("Gas").Name("Natural gas");
s.Add().ValueField("Coal").Name("Coal");
s.Add().ValueField("Nuclear").Name("Nuclear");
})
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
.ItemTextPosition(Position.Bottom)
)
.Title(t => t
.Text("Energy Consumption in 2004")
.Subtitle(s => s.Text("(Millions of Tons, Oil Equivalent)"))
)
.Export(e => e.Enabled(true))
.Tooltip(t => t
.Enabled(true)
.CustomizeTooltip(@<text>
function (arg) {
return {
text: arg.valueText
};
}
</text>)
)
.DataSource(new List<object> {
new { Country = "USA", Hydro = 59.8, Oil = 937.6, Gas = 582, Coal = 564.3, Nuclear = 187.9 },
new { Country = "China", Hydro = 74.2, Oil = 308.6, Gas = 35.1, Coal = 956.9, Nuclear = 11.3 },
new { Country = "Russia", Hydro = 40, Oil = 128.5, Gas = 361.8, Coal = 105, Nuclear = 32.4 },
new { Country = "Japan", Hydro = 22.6, Oil = 241.5, Gas = 64.9, Coal = 120.8, Nuclear = 64.8 },
new { Country = "India", Hydro = 19, Oil = 119.3, Gas = 28.9, Coal = 204.8, Nuclear = 3.8 },
new { Country = "Germany", Hydro = 6.1, Oil = 123.6, Gas = 77.3, Coal = 85.7, Nuclear = 37.8 }
})
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Series Type</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] {
SeriesType.Line,
SeriesType.StackedLine,
SeriesType.FullStackedLine
})
.Value(SeriesType.Line)
.OnValueChanged(@<text>
function (e) {
$("#line-chart").dxChart("option", "commonSeriesSettings.type", e.value);
}
</text>)
)
</div>
</div>
</div>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult Line() {
return View();
}
}
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}