This demo illustrates the use of the pointClick callback function to implement selection in the Chart component. The selectionMode of the series is set to «allArgumentPoints», which means that when a user selects a point, other points with the same argument also become selected.
@(Html.DevExtreme().Chart()
.ID("chart")
.Rotated(true)
.CommonSeriesSettings(s => s
.ArgumentField("Country")
.Type(SeriesType.Bar)
.HoverMode(ChartSeriesHoverMode.AllArgumentPoints)
.SelectionMode(ChartSeriesSelectionMode.AllArgumentPoints)
.Label(l => l
.Visible(true)
.Format(f => f.Type(Format.Percent).Precision(1))
)
)
.ValueAxis(a => a.Add().Label(l => l.Format(f => f.Type(Format.Percent).Precision(1))))
.Series(s => {
s.Add().ValueField("Year2007").Name("2007 - 2008");
s.Add().ValueField("Year2008").Name("2008 - 2009");
})
.Title(t => t.Text("Economy - Export Change"))
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
)
.Export(e => e.Enabled(true))
.OnPointClick(@<text>
function(e) {
e.target.select();
}
</text>)
.OnLegendClick(@<text>
function(e) {
var series = e.target;
if(series.isVisible()) {
series.hide();
} else {
series.show();
}
}
</text>)
.DataSource(new[] {
new { Country = "China", Year2007 = 0.18265, Year2008 = -0.16682 },
new { Country = "Germany", Year2007 = 0.10467, Year2008 = -0.20165 },
new { Country = "United States", Year2007 = 0.1232, Year2008 = -0.17994 },
new { Country = "Japan", Year2007 = 0.10868, Year2008 = -0.25622 },
new { Country = "France", Year2007 = 0.09526, Year2008 = -0.23631 },
new { Country = "Netherlands", Year2007 = 0.14402, Year2008 = -0.21923 }
})
)
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 Selection() {
return View();
}
}
}#chart {
height: 440px;
}