Range Area Charts are rendered by shading the area between a range of values (LOW & HIGH) and enveloping it with straight line segments. The given example shows ASP.NET MVC Range Area Chart along with source code that you can try running locally.
@{ Layout = null; } <!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, exportEnabled: true, title: { text: "Average High/Low Tempaerature - Paris, 2017" }, axisY: { includeZero: false, title: "Temperature (°C)", suffix: " °C" }, axisX: { valueFormatString: "MMM", intervalType: "month", interval: 1 }, data: [ { type: "rangeArea", xValueFormatString: "MMMM", yValueFormatString: "#,##0.## °C", toolTipContent: " <span style=\"color:#4F81BC\">{x}</span><br><b>Min:</b> {y[0]}<br><b>Max:</b> {y[1]}", xValueType: "dateTime", dataPoints: @Html.Raw(ViewBag.DataPoints) }] }); chart.render(); } </script> </head> <body> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>
using ASPNET_MVC_ChartsDemo.Models; using Newtonsoft.Json; using System.Collections.Generic; using System.Web.Mvc; namespace ASPNET_MVC_ChartsDemo.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { List<DataPoint> dataPoints = new List<DataPoint>(); dataPoints.Add(new DataPoint(1483209000000, new double[] { 3, 7 })); dataPoints.Add(new DataPoint(1485887400000, new double[] { 3, 8 })); dataPoints.Add(new DataPoint(1488306600000, new double[] { 5, 12 })); dataPoints.Add(new DataPoint(1490985000000, new double[] { 7, 16 })); dataPoints.Add(new DataPoint(1493577000000, new double[] { 11, 20 })); dataPoints.Add(new DataPoint(1496255400000, new double[] { 14, 23 })); dataPoints.Add(new DataPoint(1498847400000, new double[] { 16, 25 })); dataPoints.Add(new DataPoint(1501525800000, new double[] { 16, 25 })); dataPoints.Add(new DataPoint(1504204200000, new double[] { 13, 21 })); dataPoints.Add(new DataPoint(1506796200000, new double[] { 10, 16 })); dataPoints.Add(new DataPoint(1509474600000, new double[] { 6, 11 })); dataPoints.Add(new DataPoint(1512066600000, new double[] { 3, 8 })); ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints); return View(); } } }
using System; using System.Runtime.Serialization; namespace ASPNET_MVC_ChartsDemo.Models { //DataContract for Serializing Data - required to serve in JSON format [DataContract] public class DataPoint { public DataPoint(double x, double[] y) { this.X = x; this.Y = y; } //Explicitly setting the name to be used while serializing to JSON. [DataMember(Name = "x")] public Nullable<double> X = null; //Explicitly setting the name to be used while serializing to JSON. [DataMember(Name = "y")] public double[] Y = null; } }
The text shown in the toolTip can be customized using toolTipContent property. Some other commonly used customization options are showInLegend, color, fillOpacity, etc.