@(Html.DevExtreme().Chart()
.ID("chart")
.CommonSeriesSettings(s => s
.ArgumentField("Country")
.Type(SeriesType.Bar)
.Label(l => l.Visible(true))
)
.Series(s =>
{
s.Add().ValueField("Gold").Name("Gold").Color("#ffd700");
s.Add().ValueField("Silver").Name("Silver").Color("#c0c0c0");
s.Add().ValueField("Bronze").Name("Bronze").Color("#cd7f32");
})
.Title(t => t.Text("Ice Hockey World Championship Gold Medal Winners"))
.ArgumentAxis(a => a
.Label(l => l
.Template(@<text>
<svg overflow="visible">
<image href="<%- getFilePath(valueText) %>" filter="url(#DevExpress_shadow_filter)" y="0" width="60" height="40" />
<text class="template-text" x="30" y="59" text-anchor="middle"><%- valueText %></text>
</svg></text>)
)
)
.DataSource(new object[] {
new { Country = "Russia", Gold = 27, Silver = 10, Bronze = 10},
new { Country = "Canada", Gold = 26, Silver = 15, Bronze = 9},
new { Country = "Czech Republic", Gold = 12, Silver = 13, Bronze = 21},
new { Country = "Sweden", Gold = 11, Silver = 19, Bronze = 17},
new { Country = "Finland", Gold = 3, Silver = 8, Bronze = 3}
})
)
<script>
function getFilePath(text) {
return "../../images/flags/3x2/" + text.toLowerCase().replace(" ", "") + ".svg";
}
</script>
<svg width="0" height="0">
<defs>
<filter id="DevExpress_shadow_filter" x="-50%" y="-50%" width="200%" height="200%" transform="translate(0,0)">
<fegaussianblur in="SourceGraphic" result="gaussianBlurResult" stdDeviation="3"></fegaussianblur>
<feoffset in="gaussianBlurResult" result="offsetResult" dx="0" dy="1"></feoffset>
<feflood result="floodResult" flood-color="#000000" flood-opacity="0.3"></feflood>
<fecomposite in="floodResult" in2="offsetResult" operator="in" result="compositeResult"></fecomposite>
<fecomposite in="SourceGraphic" in2="compositeResult" operator="over"></fecomposite>
</filter>
</defs>
</svg>
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 AxisLabelsTemplates() {
return View();
}
}
}
#chart {
height: 440px;
}
.template-text {
fill: #767676;
font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif;
font-weight: 400;
font-size: 13px;
}