Annotation Zones

You can use annotations to create chart 'zones'. For example, the chart below has a 'buy' and 'sell' zones represented by green and red Rectangle annotations:

Jan 3Jan 10Jan 17Jan 24Jan 31Feb 7Feb 14Feb 21Feb 28Mar 7Mar 14800820840860
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// This file locates: "Scripts/Lesson/C1FlexChart/AnnotationsZones.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // add annotation layer
    var annotations = new wijmo.chart.annotation.AnnotationLayer(theChart, [
        {
            type: 'Rectangle',
            attachment: 'DataCoordinate',
            point: { x: new Date(2017, 0, 1), y: 855 },
            position: 1, // Center Top Bottom Left Right
            width: 20000, height: 20000,
            style: { fill: 'red', opacity: .15 }
        },
        {
            type: 'Rectangle',
            attachment: 'DataCoordinate',
            point: { x: new Date(2017, 0, 1), y: 815 },
            position: 2, // Center Top Bottom Left Right
            width: 20000, height: 20000,
            style: { fill: 'green', opacity: .15 }
        },
    ]);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AnnotationsZones
        public ActionResult AnnotationsZones()
        {
            return View(Models.FlexChartData.GetStocks3());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AnnotationsZones_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.AnnotationsZones_Text1)
</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"))
)