Charts - Color Each Bar Differently

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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

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.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult ColorEachBar() { return View(); } } }

#chart { height: 440px; }