This demo shows how easily you can access a necessary chart series and select a specific point in it using the API.
@(Html.DevExtreme().Chart()
.ID("chart")
.Rotated(true)
.CommonSeriesSettings(s => s
.ArgumentField("Breed")
.Type(SeriesType.Bar)
)
.Series(s => s
.Add()
.ValueField("Count")
.Name("breeds")
.Color("#a3d6d2")
.SelectionStyle(st => st
.Color("#ec2e7a")
.Hatching(h => h.Direction(HatchingDirection.None))
)
)
.Title(t => t.Text("Most Popular US Cat Breeds"))
.Legend(l => l.Visible(false))
.Export(e => e.Enabled(true))
.OnPointClick(@<text>
function(e) {
var point = e.target;
if(point.isSelected()) {
point.clearSelection();
} else {
point.select();
}
}
</text>)
.OnDone(@<text>
function(e) {
e.component.getSeriesByPos(0).getPointsByArg("Siamese")[0].select();
}
</text>)
.DataSource(new[] {
new { Breed = "Domestic Shorthair", Count = 62942 },
new { Breed = "American Shorthair", Count = 38287 },
new { Breed = "Domestic Medium Hair", Count = 15652 },
new { Breed = "Domestic Long Hair", Count = 13670 },
new { Breed = "Siamese", Count = 13377 },
new { Breed = "Maine Coon", Count = 11254 },
new { Breed = "Persian", Count = 7198 },
new { Breed = "Russian Blue", Count = 3569 },
new { Breed = "Himalayan", Count = 3755 },
new { Breed = "Ragdoll", Count = 3426 },
new { Breed = "Bengal", Count = 2966 },
new { Breed = "Manx", Count = 2391 },
new { Breed = "British Shorthair", Count = 2329 },
new { Breed = "Norwegian Forest Cat", Count = 1817 },
new { Breed = "Bombay", Count = 1486 }
})
)
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult PointSelectionAPI() {
return View();
}
}
}#chart {
height: 440px;
}