The DevExtreme Chart component allows you to display data across multiple panes. DevExtreme Chart stacks panes vertically (or horizontally when Chart axes are rotated). To create a multi-pane chart, add items to the panes[] array.
The Chart renders multiple value axes and a shared argument axis. To create multiple value axes, add a valueAxis[] object for each value axis. To assign a value axis to a pane, pass the pane name to the valueAxis.pane property.
DevExtreme Chart can display multiple series within a single pane. Specify the series.pane property to display a series in a specific pane.
@(Html.DevExtreme().Chart()
.ID("chart")
.CommonSeriesSettings(s => s.ArgumentField("Month"))
.Panes(p => {
p.Add().Name("TopPane");
p.Add().Name("BottomPane");
})
.DefaultPane("BottomPane")
.Series(s => {
s.Add()
.Pane("TopPane")
.Color("#b0daff")
.Type(SeriesType.RangeArea)
.RangeValue1Field("MinT")
.RangeValue2Field("MaxT")
.Name("Monthly Temperature Ranges, °C");
s.Add()
.Pane("TopPane")
.ValueField("AvgT")
.Name("Average Temperature, °C")
.Label(l => l
.Visible(true)
.CustomizeText(@<text>
function (){
return this.valueText + " °C";
}
</text>));
s.Add()
.Type(SeriesType.Bar)
.ValueField("Prec")
.Name("prec, mm")
.Label(l => l
.Visible(true)
.CustomizeText(@<text>
function (){
return this.valueText + " mm";
}
</text>));
})
.ValueAxis(a => {
a.Add()
.Pane("BottomPane")
.Grid(g => g.Visible(true))
.Title(t => t.Text("Precipitation, mm"));
a.Add()
.Pane("TopPane")
.Grid(g => g.Visible(true))
.Title(t => t.Text("Temperature, °C"));
})
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
)
.Export(e => e.Enabled(true))
.Title(t => t.Text("Weather in Glendale, CA"))
.DataSource(new[] {
new { Month = "January", AvgT = 9.8, MinT = 4.1, MaxT = 15.5, Prec = 109 },
new { Month = "February", AvgT = 11.8, MinT = 5.8, MaxT = 17.8, Prec = 104 },
new { Month = "March", AvgT = 13.4, MinT = 7.2, MaxT = 19.6, Prec = 92 },
new { Month = "April", AvgT = 15.4, MinT = 8.1, MaxT = 22.8, Prec = 30 },
new { Month = "May", AvgT = 18.0, MinT = 10.3, MaxT = 25.7, Prec = 10 },
new { Month = "June", AvgT = 20.6, MinT = 12.2, MaxT = 29.0, Prec = 2 },
new { Month = "July", AvgT = 22.2, MinT = 13.2, MaxT = 31.3, Prec = 2 },
new { Month = "August", AvgT = 22.2, MinT = 13.2, MaxT = 31.1, Prec = 1 },
new { Month = "September", AvgT = 21.2, MinT = 12.4, MaxT = 29.9, Prec = 8 },
new { Month = "October", AvgT = 17.9, MinT = 9.7, MaxT = 26.1, Prec = 24 },
new { Month = "November", AvgT = 12.9, MinT = 6.2, MaxT = 19.6, Prec = 64 },
new { Month = "December", AvgT = 9.6, MinT = 3.4, MaxT = 15.7, Prec = 76 }
})
)
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult MultiplePanes() {
return View();
}
}
}#chart {
height: 440px;
}