Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Bar Charts

Customize Points and Labels

Documentation

This demo shows how you can customize individual points and labels in the Chart.

<script> var highAverage = 77, lowAverage = 58; </script> @(Html.DevExtreme().Chart() .ID("chart") .CommonSeriesSettings(s => s .ArgumentField("Day") .ValueField("Temperature") .Type(SeriesType.Bar) .Color("#e7d19a") ) .CustomizePoint(@<text> function() { if(this.value > highAverage) { return { color: "#ff7c7c", hoverStyle: { color: "#ff7c7c" } }; } else if(this.value < lowAverage) { return { color: "#8c8cff", hoverStyle: { color: "#8c8cff" } }; } } </text>) .CustomizeLabel(@<text> function() { if (this.value > highAverage) { return { visible: true, backgroundColor: "#ff7c7c", customizeText: function () { return this.valueText + "&#176F"; } }; } } </text>) .Export(e => e.Enabled(true)) .ValueAxis(a => a .Add() .VisualRange(range => range.StartValue(40)) .MaxValueMargin(0.01) .Label(l => l.CustomizeText(@<text> function() { return this.valueText + "&#176F"; } </text>)) .ConstantLines(cl => { cl.Add() .Label(l => l.Text("Low Average")) .Width(2) .Value(new JS("lowAverage")) .Color("#8c8cff") .DashStyle(DashStyle.Dash); cl.Add() .Label(l => l.Text("High Average")) .Width(2) .Value(new JS("highAverage")) .Color("#ff7c7c") .DashStyle(DashStyle.Dash); }) ) .Series(s => s.Add()) .Title(t => t.Text("Daily Temperature in May")) .Legend(l => l.Visible(false)) .DataSource(new[] { new { Day = "1", Temperature = 57 }, new { Day = "2", Temperature = 58 }, new { Day = "3", Temperature = 57 }, new { Day = "4", Temperature = 59 }, new { Day = "5", Temperature = 63 }, new { Day = "6", Temperature = 63 }, new { Day = "7", Temperature = 63 }, new { Day = "8", Temperature = 64 }, new { Day = "9", Temperature = 64 }, new { Day = "10", Temperature = 64 }, new { Day = "11", Temperature = 69 }, new { Day = "12", Temperature = 72 }, new { Day = "13", Temperature = 75 }, new { Day = "14", Temperature = 78 }, new { Day = "15", Temperature = 76 }, new { Day = "16", Temperature = 70 }, new { Day = "17", Temperature = 65 }, new { Day = "18", Temperature = 65 }, new { Day = "19", Temperature = 68 }, new { Day = "20", Temperature = 70 }, new { Day = "21", Temperature = 73 }, new { Day = "22", Temperature = 73 }, new { Day = "23", Temperature = 75 }, new { Day = "24", Temperature = 78 }, new { Day = "25", Temperature = 76 }, new { Day = "26", Temperature = 76 }, new { Day = "27", Temperature = 80 }, new { Day = "28", Temperature = 76 }, new { Day = "29", Temperature = 75 }, new { Day = "30", Temperature = 75 }, new { Day = "31", Temperature = 74 } }) )
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult CustomizePointsAndLabels() { return View(); } } }
#chart { height: 440px; }