Your search did not match any results.

Custom Annotations

To customize an annotation, declare the SVG markup in the annotation template. Inside the template, you can access the annotation being customized.

en.wikipedia.org
@{ var dataSource = new[] { new { Name = "California", Population = 38802500, Capital = "Sacramento", Area = 423967 }, new { Name = "Texas", Population = 26956958, Capital = "Austin", Area = 695662 }, new { Name = "Florida", Population = 19893297, Capital = "Tallahassee", Area = 170312 }, new { Name = "New York", Population = 19746227, Capital = "Albany", Area = 141297 }, new { Name = "Illinois", Population = 12880580, Capital = "Springfield", Area = 149995 } }; } @(Html.DevExtreme().Chart() .ID("chart") .Title("Top 5 Most Populated States in US") .Series(s => s .Add() .Type(SeriesType.Bar) .ArgumentField("Name") .ValueField("Population") .Name("Population") ) .CommonAnnotationSettings(c=>c.Series("Population") .Type(AnnotationType.Custom) .AllowDragging(true) .Template(@<text> <svg class='annotation'> <image href="<%-getImagePath(argument)%>" width="60" height="40" /> <text x="70" y="25" class="state"><%- argument %></text> <text x="0" y="60"> <tspan class="caption">Capital:</tspan><tspan dx="5"><%- data.Capital %></tspan><tspan dy="14" x="0" class="caption">Population:</tspan><tspan dx="5"><%- formatNumber(data.Population) %></tspan><tspan dy="14" x="0" class="caption">Area:</tspan><tspan dx="5"><%- formatNumber(data.Area) %></tspan><tspan dx="5">km</tspan><tspan class="sup" dy="-2">2</tspan> </text> </svg> </text>)) .Annotations(a => { foreach(var dataItem in dataSource) { a.Add().Argument(dataItem.Name) .Data(dataItem); } }) .Legend(l=>l.Visible(false)) .DataSource(dataSource) ) <script> function formatNumber(value) { return Globalize.formatNumber(value, { maximumFractionDigits: 0 }); } function getImagePath(argument) { return '../../images/flags/' + argument.replace(/\s/, "").toLowerCase() + ".gif"; } </script>
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 CustomAnnotations() { return View(); } } }
#chart { height: 440px; } .annotation { font-size: 12px; } .state { font-weight: 500; font-size: 14px; } .caption { font-weight: 500; } .sup { font-size: 0.8em; }