Extra Chart Elements

In addition to the regular chart elements described earlier (axes, plotArea, legend, header, footer etc), you can add extra elements to the chart in several ways:

events: Use the rendering and rendered events to add arbitrary elements behind or in front of the regular chart elements.
annotations: Use the wijmo.chart.annotation extension to add annotations (shapes or text) to data points or to chart areas.
analytics: Use the wijmo.chart.analytics extension to add trendlines and moving averages to the chart.
plotAreas: Use the plotAreas property to add multiple plot areas to the chart, using the same header, footer, legend, and sharing axes.

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

// This file locates: "Scripts/Lesson/C1FlexChart/ExtraElements.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, 840, xMax, yMax, 'sell-zone');
        drawAlarmZone(s, e.engine, xMin, yMin, xMax, 810, '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/ExtraElements.css".
.sell-zone {
  fill: red;
  opacity: .2;
  stroke-width: 0;
}
.buy-zone {
  fill: green;
  opacity: .2;
  stroke-width: 0;
}

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.ExtraElements_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.ExtraElements_Text1)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexChart.ExtraElements_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ExtraElements_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ExtraElements_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ExtraElements_Text5)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1FlexChart.ExtraElements_Text6)
</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"))
)