Chart Elements and Hit-Testing

The FlexChart is composed of elements that can be customized using its object model. The elements are:

PlotArea: The area within the axes.
ChartArea: The area within the control but outside the axes.
Legend: The chart legend, usually on the right of the plot area.
Header: The chart header, above the plot area.
Footer: The chart footer, below the plot area.
AxisX: The X-axis, usually horizontal.
AxisY: The Y-axis, usually vertical.
Series: A chart series.
SeriesSymbol: A symbol in a chart series.
DataLabel: A label attached to a data point.

You can use the hitTest method to determine what chart area is under the mouse.

Move the mouse over the chart below to see some information about each element:

// This file locates: "Scripts/Lesson/C1FlexChart/ChartElements.js".
c1.documentReady(function(){
    var theChart = wijmo.Control.getControl('#theChart');
 
    // use tooltip to show hit-test information
    var tt = new wijmo.Tooltip(),
        tip = '';
    theChart.hostElement.addEventListener('mousemove', function (e) {
        // build tooltip text
        var ht = theChart.hitTest(e),
            elem = ht.chartElement,
          series = (ht.series && [1, 2, 3].indexOf(elem) < 0) ? ht.series : null,
          index = (ht.pointIndex != null && series) ? ht.pointIndex : null,
          newTip = wijmo.format('chartElement: <b>{elem}</b><br/>series: <b>{series}</b><br/>pointIndex: <b>{index}</b>', {
              elem: wijmo.chart.ChartElement[elem],
              series: series ? series.name : 'none',
              index: index != null ? index : 'none'
          });
 
        // update tooltip      
        if (newTip != tip) {
            tip = newTip;
            tt.show(e.target, tip, new wijmo.Rect(e.clientX, e.clientY, 0, 0));
        }
    });
    theChart.hostElement.addEventListener('mouseleave', function (e) {
        tt.hide();
        tip = '';
    });
});

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.ChartElements_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.ChartElements_Text1)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text6)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text7)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text8)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text9)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text10)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartElements_Text11)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1FlexChart.ChartElements_Text12)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.ChartElements_Text13)
</p>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols)
    .Header(Resources.C1FlexChart.ChartElements_Text14)
    .Footer(Resources.C1FlexChart.ChartElements_Text15)
    .DataLabel(dl=>dl.Content("{value:0}").Position(C1.Web.Mvc.Chart.LabelPosition.Top).Offset(5))
    .Tooltip(t=>t.Content(""))
    .Series(sb=>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
    })
)