Data Labels

The dataLabels property allows you to show labels next to each data point on the chart.

To use it, set the following properties on the dataLabels object:

content: String template with property holders, similar to the string used to define tooltip content. For example, '{value:n0}'.
position: A LabelPosition value that determines where to place the labels relative to the data points.
connectingLine: Whether to draw a line connecting the labels and corresponding data points.
border: Whether to draw a border around the label.

Label Position:
Lines/Borders:
Downloads Only:

// This file locates: "Scripts/Lesson/C1FlexChart/DataLabels.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var labelPosition = wijmo.Control.getControl('#labelPosition');
    var downloadsOnly = false;
 
    theChart.dataLabel.content = '{value:0}';
    theChart.dataLabel.position = "Top"; //None,Left,Top,Right,Bottom,Center
    theChart.dataLabel.rendering.addHandler(function (s, e) {
        if (downloadsOnly && e.hitTestInfo.series.binding != 'Downloads') {
            e.cancel = true; // labels only for the "downloads" series
        }
    });
 
    // customize the data labels
    labelPosition.textChanged.addHandler(function (s, e) {
        theChart.dataLabel.position = s.text;
    });
    document.getElementById('linesAndBorders').addEventListener('click', function (e) {
        var dl = theChart.dataLabel;
        dl.connectingLine = dl.border = e.target.checked;
    });
    document.getElementById('downloadsOnly').addEventListener('click', function (e) {
        downloadsOnly = e.target.checked;
        theChart.invalidate();
    });
});

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
@{
    var positions = new[] { "None", "Left", "Top", "Right", "Bottom", "Center" };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.DataLabels_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.DataLabels_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.DataLabels_Text2)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexChart.DataLabels_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.DataLabels_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.DataLabels_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.DataLabels_Text6)
    </li>
</ul>
 
<div class="demo-settings">
    <label for="labelPosition">@Html.Raw(Resources.C1FlexChart.DataLabels_Text7) </label>
    @Html.C1().ComboBox().Id("labelPosition").Bind(positions).Text("Top")
    <br />
    <label for="linesAndBorders">@Html.Raw(Resources.C1FlexChart.DataLabels_Text8) </label>
    <input id="linesAndBorders" type="checkbox"><br />
    <label for="downloadsOnly">@Html.Raw(Resources.C1FlexChart.DataLabels_Text9) </label>
    <input id="downloadsOnly" type="checkbox">
</div>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Line)
    .Tooltip(tb => tb.Content(""))
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads");
    })
)