FlexChart
FlexChart
Labels
Features
Sample
Settings
Description
Labels
This view demonstrates how you can use the FlexChart's DataLabel property to add labels to each data point.
Source
LabelsController.cs
using System;
using MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc.Chart;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
public ActionResult Labels()
{
var model = new ClientSettingsModel
{
Settings = CreateLabelSettings()
};
return View(model);
}
private static IDictionary<string, object[]> CreateLabelSettings()
{
var settings = new Dictionary<string, object[]>
{
{"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
{"DataLabel.Position", new object[]{LabelPosition.Top.ToString(), LabelPosition.Right.ToString(), LabelPosition.Bottom.ToString(), LabelPosition.Left.ToString(), LabelPosition.None.ToString()}},
{"DataLabel.Border", new object[]{false, true}},
};
return settings;
}
}
}
Labels.cshtml
@{
ViewBag.DemoSettings = true;
ViewBag.DemoSettingsModel = Model;
var fruits = Fruit.GetFruitsSales();
}
<c1-flex-chart id="@Model.ControlId" binding-x="Name">
<c1-items-source source-collection="fruits"></c1-items-source>
<c1-flex-chart-series binding="MarPrice" name="March"></c1-flex-chart-series>
<c1-flex-chart-series binding="AprPrice" name="April"></c1-flex-chart-series>
<c1-flex-chart-series binding="MayPrice" name="May"></c1-flex-chart-series>
<c1-flex-chart-datalabel position="Top" content="{y}"></c1-flex-chart-datalabel>
</c1-flex-chart>
@section Description{
<h3>
@Html.Raw(FlexChartRes.Labels_Labels)
</h3>
<p>@Html.Raw(FlexChartRes.Labels_Text0)</p>
}
Documentation