FlexChart
FlexChart
Labels
Labels
This view demonstrates how you can use the FlexChart's DataLabel
property to add labels to each data point.
Features
Settings
ChartType: Column
DataLabelPosition: Top
DataLabelBorder: False
Description
Labels
This view demonstrates how you can use the FlexChart's DataLabel property to add labels to each data point.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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.Center.ToString(), LabelPosition.None.ToString()}}, {"DataLabel.Border", new object[]{false, true}}, }; return settings; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @{ 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> } |