FlexChart Tooltips

By default, the FlexChart shows tooltips with information about the data point under the mouse. You can remove the tooltips or customize their content using the tooltip property.

The tooltip's content property is an HTML template that may contains information about the series, the data point, and the data element. For example:

Tooltip Content:

// This file locates: "Scripts/Lesson/C1FlexChart/Tooltips.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var tooltip = wijmo.Control.getControl('#tooltip');
 
    tooltip.selectedIndexChanged.addHandler(function (s, e) {
        theChart.tooltip.content = s.selectedItem.Value;
    });
});

// This file locates: "Content/css/Lesson/C1FlexChart/Tooltips.css".
.custom-gridlines.wj-flexchart .wj-axis-x .wj-tick,
.custom-gridlines.wj-flexchart .wj-axis-y .wj-tick {
    stroke: darkgreen;
}
.custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline,
.custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline {
    opacity: .25;
    stroke: darkgreen;
    stroke-width: 1px;
}
.custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline-minor,
.custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline-minor {
    opacity: .25;
    stroke: darkgreen;
    stroke-dasharray: 0;
    stroke-width: .25px;
}
 
.wj-tooltip {
  padding: 12px;
}
.wj-tooltip table tr td {
  text-align: right;
  padding-right: 6px;
}
.wj-tooltip table tr td:last-child {
  font-weight: bold;
}

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
@{
    var defaultContent = "<b>{seriesName}</b><br/>{x} {y}";
    var tableContent = "<b>{Date:MMM dd}</b><br />" +
            "<table>" +
            "<tr><td>high</td><td>{High:c}</td><tr/>" +
            "<tr><td>low</td><td>{Low:c}</td><tr/>" +
            "<tr><td>open</td><td>{Open:c}</td><tr/>" +
            "<tr><td>close</td><td>{Close:c}</td><tr/>" +
            "</table>";
    var tooltips = new[] {
        new KeyValuePair<string, string>("Default", defaultContent),
        new KeyValuePair<string, string>("None", ""),
        new KeyValuePair<string, string>("Table", tableContent)
    };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Tooltips_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Tooltips_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Tooltips_Text2)
</p>
 
<div class="demo-settings">
    <label for="tooltip">@Html.Raw(Resources.C1FlexChart.Tooltips_Text3) </label>
    @(Html.C1().ComboBox<KeyValuePair<string, string>>().Id("tooltip").Bind(tooltips).DisplayMemberPath("Key"))
</div>
 
@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .CssClass("custom-gridlines")
    .Bind("Date", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick)
    .Series(sb=>sb.Add().Binding("High,Low,Open,Close").Name(Resources.C1FlexChart.Axes_Text10))
    .Legend(C1.Web.Mvc.Chart.Position.None)
    .AxisX(x => x.Format("MMM dd")
                .MajorGrid(true) // show major gridlines
                .MajorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.Cross) // None,Outside,Inside,Cross
                .MajorUnit(7)
                .MinorGrid(true) // show minor gridlines
                .MinorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.None) // None,Outside,Inside,Cross
                .MinorUnit(1))
    .AxisY(y => y.Min(790).Max(860)
                .Format("c0")
                .AxisLine(true) // show axis line
                .MajorGrid(true) // show major gridlines
                .MajorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.Cross) // None,Outside,Inside,Cross
                .MajorUnit(20)
                .MinorGrid(true) // show minor gridlines
                .MinorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.None) // None,Outside,Inside,Cross
                .MinorUnit(5))
    .Header(Resources.C1FlexChart.Axes_Text9)
)