Alarm Zones

You can use the FlexChart's rendering and rendered events to add arbitrary elements behind or above the regular chart elements.

For example,the chart below has 'buy' and 'sell' zones created in the chart's rendering event handler:

// This file locates: "Scripts/Lesson/C1FlexChart/AnnotationsZonesRedux.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    theChart.rendering.addHandler(function (s, e) {
        // behind the regular chart elements
        var xMin = s.axisX.actualMin.valueOf(),
            xMax = s.axisX.actualMax.valueOf(),
            yMin = s.axisY.actualMin,
            yMax = s.axisY.actualMax;
        drawAlarmZone(s, e.engine, xMin, 855, xMax, yMax, 'sell-zone');
        drawAlarmZone(s, e.engine, xMin, yMin, xMax, 815, 'buy-zone');
    });
 
    // draw an alarm zone into the chart
    function drawAlarmZone(chart, engine, xMin, yMin, xMax, yMax, className) {
        var pt1 = chart.dataToPoint(xMin, yMin);
        var pt2 = chart.dataToPoint(xMax, yMax);
        engine.drawRect(
            Math.min(pt1.x, pt2.x), Math.min(pt1.y, pt2.y),
            Math.abs(pt2.x - pt1.x), Math.abs(pt2.y - pt1.y),
          className);
    }
});

// This file locates: "Content/css/Lesson/C1FlexChart/AnnotationsZonesRedux.css".
.sell-zone {
  fill: red;
  opacity: .15;
  stroke-width: 0;
}
.buy-zone {
  fill: green;
  opacity: .15;
  stroke-width: 0;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AnnotationsZonesRedux
        public ActionResult AnnotationsZonesRedux()
        {
            return View(Models.FlexChartData.GetStocks3());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AnnotationsZonesRedux_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.AnnotationsZonesRedux_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AnnotationsZonesRedux_Text2)
</p>
 
@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind("Date", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick)
    .Legend(C1.Web.Mvc.Chart.Position.None)
    .Series(sb => sb.Add().Binding("Low,High,Open,Close").Name("Alphabet Inc"))
)