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.
@(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 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 BarColorCustomization() {
return View();
}
}
}#chart {
height: 440px;
}