Your search did not match any results.
Charts

Color Each Bar Differently

Documentation
As the Chart assigns one color to one series by default, you need to create a separate series for each bar to color bars differently. For this, employ a series template. Choose a data field and assign it to the seriesTemplate | nameField option. Each different value from this data field generates a separate series. In this demo, all values from the "age" data field are different, therefore, a separate series is generated for each, and all series are colored differently.
@(Html.DevExtreme().Chart() .ID("chart") .Palette(VizPalette.Soft) .CommonSeriesSettings(s => s .ArgumentField("age") .ValueField("number") .Type(SeriesType.Bar) ) .Title(t => t .Text("Age Breakdown of Facebook Users in the U.S.") .Subtitle("as of January 2017") ) .ValueAxis(a => a.Add().Label(l => l.Format("millions"))) .EqualBarWidth(false) .SeriesTemplate(t => t.NameField("age")) .DataSource(new List<object> { new { age = "13-17", number = 5900000 }, new { age = "18-24", number = 38250000 }, new { age = "25-34", number = 52820000 }, new { age = "35-44", number = 38420000 }, new { age = "45-54", number = 32340000 }, new { age = "55-64", number = 14060000 }, new { age = "65+", number = 20020000 } }) )
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.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult ColorEachBar() { return View(); } } }
#chart { height: 440px; }