Charts - Bar Color Customization

The Chart assigns one color to one series. To color bars differently, create a separate series for each bar.

Assign the age field to the argumentField property of the commonSeriesSettings object to specify a common argument for the series. Then specify the valueField property.

Choose a data field and assign it to the seriesTemplate.nameField property. Each value from this data field generates a separate series.

To learn more about this type of data binding, refer to the following demo: Dynamic Series from the DataSource.

Backend API

@(Html.DevExtreme().Chart() .ID("chart") .Palette(VizPalette.Soft) .CommonSeriesSettings(s => s .ArgumentField("Age") .ValueField("Number") .Type(SeriesType.Bar) .IgnoreEmptyPoints(true) ) .Title(t => t .Text("Age Breakdown of Facebook Users in the U.S.") .Subtitle("as of January 2017") ) .SeriesTemplate(t => t.NameField("Age")) .DataSource(new[] { new { Age = "13-17", Number = 6869661 }, new { Age = "18-24", Number = 40277957 }, new { Age = "25-34", Number = 53481235 }, new { Age = "35-44", Number = 40890002 }, new { Age = "45-54", Number = 31916371 }, new { Age = "55-64", Number = 13725406 }, new { Age = "65+", Number = 16732183 } }) )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult BarColorCustomization() { return View(); } } }

#chart { height: 440px; }