Annotations

Annotations are extra elements displayed over the chart to highlight notable points or areas on the chart.

To add annotations to a FlexChart, create an annotationLayer attached to the chart and populate it with annotation objects.

There are several types of annotation objects, including Rectangle, Square, Circle, Ellipse, Line, Polygon, Image, and Text. They may be attached to data points or to arbitrary points in data or page coordinates.

The chart below has an Ellipse annotation attached to data point 15 and a Line annotation attached to the month of February:

// This file locates: "Scripts/Lesson/C1FlexChart/Annotations.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // add annotation layer
    var annotations = new wijmo.chart.annotation.AnnotationLayer(theChart, [
      { // attach an Ellipse to data point 15
          type: 'Ellipse',
          content: 'Ellipse',
          tooltip: 'This is an <b>Ellipse</b><br/>annotation',
          attachment: 'DataIndex',
          seriesIndex: 0,
          pointIndex: 15,
          width: 100, height: 40,
          position: 'Top', // Center/Top/Bottom/Left/Right
          style: { fill: 'green', stroke: 'darkgreen', strokeWidth: 2, opacity: .25 }
      },
      { // show a trendline between Feb 10 and Mar 3
          type: 'Line',
          tooltip: 'This is a <b>Line</b><br/>annotation',
          position: 'Center',
          attachment: 'DataCoordinate',
          start: { x: new Date(2017, 1, 10), y: 810 },
          end: { x: new Date(2017, 2, 3), y: 840 },
          style: { stroke: 'darkgreen', strokeWidth: 4, opacity: .5 }
      }
    ]);
});

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Annotations_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Annotations_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Annotations_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Annotations_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Annotations_Text4)
</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"))
)