Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Bar Charts

    Side-by-Side Bar

    Documentation

    This demo illustrates the flexibility of the standard bar series type. To help compare values across different categories, rectangular bars are positioned side-by-side.

    See more Hide details
    Prev Demo Next Demo
    www.bea.gov

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    @(Html.DevExtreme().Chart() .ID("chart") .CommonSeriesSettings(s => s .ArgumentField("State") .Type(SeriesType.Bar) .HoverMode(ChartSeriesHoverMode.AllArgumentPoints) .SelectionMode(ChartSeriesSelectionMode.AllArgumentPoints) .Label(l => l .Visible(true) .Format(f => f .Type(Format.FixedPoint) .Precision(0) ) ) ) .Series(s => { s.Add().ValueField("Year2004").Name("2004"); s.Add().ValueField("Year2001").Name("2001"); s.Add().ValueField("Year1998").Name("1998"); }) .Title("Gross State Product within the Great Lakes Region") .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) ) .Export(e => e.Enabled(true)) .OnPointClick(@<text> function(e) { e.target.select(); } </text>) .DataSource(new[] { new { State = "Illinois", Year1998 = 423.721, Year2001 = 476.851, Year2004 = 528.904 }, new { State = "Indiana", Year1998 = 178.719, Year2001 = 195.769, Year2004 = 227.271 }, new { State = "Michigan", Year1998 = 308.845, Year2001 = 335.793, Year2004 = 372.576 }, new { State = "Ohio", Year1998 = 348.555, Year2001 = 374.771, Year2004 = 418.258 }, new { State = "Wisconsin", Year1998 = 160.274, Year2001 = 182.373, Year2004 = 211.727 } }) )
    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 SideBySideBar() { return View(); } } }
    #chart { height: 440px; }