Your search did not match any results.

Color Each Bar Differently

Documentation

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.

www.statista.com
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 = 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.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult ColorEachBar() { return View(); } } }
#chart { height: 440px; }