Area charts » Area range with line

var ranges = new HighchartsDataPoint?[][] {
    new HighchartsDataPoint?[]{1246406400000, 14.3, 27.7},
    new HighchartsDataPoint?[]{1246492800000, 14.5, 27.8},
    new HighchartsDataPoint?[]{1246579200000, 15.5, 29.6},
    new HighchartsDataPoint?[]{1246665600000, 16.7, 30.7},
    new HighchartsDataPoint?[]{1246752000000, 16.5, 25.0},
    new HighchartsDataPoint?[]{1246838400000, 17.8, 25.7},
    new HighchartsDataPoint?[]{1246924800000, 13.5, 24.8},
    new HighchartsDataPoint?[]{1247011200000, 10.5, 21.4},
    new HighchartsDataPoint?[]{1247097600000, 9.2, 23.8},
    new HighchartsDataPoint?[]{1247184000000, 11.6, 21.8},
    new HighchartsDataPoint?[]{1247270400000, 10.7, 23.7},
    new HighchartsDataPoint?[]{1247356800000, 11.0, 23.3},
    new HighchartsDataPoint?[]{1247443200000, 11.6, 23.7},
    new HighchartsDataPoint?[]{1247529600000, 11.8, 20.7},
    new HighchartsDataPoint?[]{1247616000000, 12.6, 22.4},
    new HighchartsDataPoint?[]{1247702400000, 13.6, 19.6},
    new HighchartsDataPoint?[]{1247788800000, 11.4, 22.6},
    new HighchartsDataPoint?[]{1247875200000, 13.2, 25.0},
    new HighchartsDataPoint?[]{1247961600000, 14.2, 21.6},
    new HighchartsDataPoint?[]{1248048000000, 13.1, 17.1},
    new HighchartsDataPoint?[]{1248134400000, 12.2, 15.5},
    new HighchartsDataPoint?[]{1248220800000, 12.0, 20.8},
    new HighchartsDataPoint?[]{1248307200000, 12.0, 17.1},
    new HighchartsDataPoint?[]{1248393600000, 12.7, 18.3},
    new HighchartsDataPoint?[]{1248480000000, 12.4, 19.4},
    new HighchartsDataPoint?[]{1248566400000, 12.6, 19.9},
    new HighchartsDataPoint?[]{1248652800000, 11.9, 20.2},
    new HighchartsDataPoint?[]{1248739200000, 11.0, 19.3},
    new HighchartsDataPoint?[]{1248825600000, 10.8, 17.8},
    new HighchartsDataPoint?[]{1248912000000, 11.8, 18.5},
    new HighchartsDataPoint?[]{1248998400000, 10.8, 16.1}
};
var averages = new HighchartsDataPoint?[][]
{
    new HighchartsDataPoint?[] {1246406400000, 21.5},
    new HighchartsDataPoint?[] {1246492800000, 22.1},
    new HighchartsDataPoint?[] {1246579200000, 23},
    new HighchartsDataPoint?[] {1246665600000, 23.8},
    new HighchartsDataPoint?[] {1246752000000, 21.4},
    new HighchartsDataPoint?[] {1246838400000, 21.3},
    new HighchartsDataPoint?[] {1246924800000, 18.3},
    new HighchartsDataPoint?[] {1247011200000, 15.4},
    new HighchartsDataPoint?[] {1247097600000, 16.4},
    new HighchartsDataPoint?[] {1247184000000, 17.7},
    new HighchartsDataPoint?[] {1247270400000, 17.5},
    new HighchartsDataPoint?[] {1247356800000, 17.6},
    new HighchartsDataPoint?[] {1247443200000, 17.7},
    new HighchartsDataPoint?[] {1247529600000, 16.8},
    new HighchartsDataPoint?[] {1247616000000, 17.7},
    new HighchartsDataPoint?[] {1247702400000, 16.3},
    new HighchartsDataPoint?[] {1247788800000, 17.8},
    new HighchartsDataPoint?[] {1247875200000, 18.1},
    new HighchartsDataPoint?[] {1247961600000, 17.2},
    new HighchartsDataPoint?[] {1248048000000, 14.4},
    new HighchartsDataPoint?[] {1248134400000, 13.7},
    new HighchartsDataPoint?[] {1248220800000, 15.7},
    new HighchartsDataPoint?[] {1248307200000, 14.6},
    new HighchartsDataPoint?[] {1248393600000, 15.3},
    new HighchartsDataPoint?[] {1248480000000, 15.3},
    new HighchartsDataPoint?[] {1248566400000, 15.8},
    new HighchartsDataPoint?[] {1248652800000, 15.2},
    new HighchartsDataPoint?[] {1248739200000, 14.8},
    new HighchartsDataPoint?[] {1248825600000, 14.4},
    new HighchartsDataPoint?[] {1248912000000, 15},
    new HighchartsDataPoint?[] {1248998400000, 13.6}
};

@Html.Highcharts4Net().MultiTypeChart(settings =>
{
    settings.SetTitle(s => { s.Text = "July temperatures"; });

    settings.AddXAxis(s => { s.Type = AxisTypes.Datetime; });

    settings.AddYAxis(s => { s.Title = new YAxisTitle { Enabled = false }; });

    settings.SetTooltip(s =>
    {
        s.Crosshairs = new Crosshairs(true);
        s.Shared = true;
        s.ValueSuffix = " °C";
    });

    settings.AddSeriesLine(s =>
    {
        s.Name = "Temperatures";
        s.Data = new Data(averages);
        s.ZIndex = 1;
        s.Marker = new PlotOptionsLineMarker
        {
            FillColor = new ColorOrGradient(Color.White),
            LineWidth = 2,
            LineColor = new ColorOrGradient("Highcharts.getOptions().colors[0]", false) // false to avoid quotes in the javascript code.
        };
    });

    settings.AddSeriesArearange(s =>
    {
        s.Name = "Range";
        s.Data = new Data(ranges);
        s.LineWidth = 0;
        s.LinkedTo = ":previous";
        s.Color = new ColorOrGradient("Highcharts.getOptions().colors[0]", false); // false to avoid quotes in the javascript code.
        s.FillOpacity = 0.3;
        s.ZIndex = 0;
    });

}).Render()