Your search did not match any results.

Charts - Standard Bar

This demo shows the standard bar series type that visualizes data as a collection of bars. Follow the steps below to create and configure the Bar chart.

Backend API
@(Html.DevExtreme().Chart() .ID("chart") .Series(s => s .Add() .ArgumentField("Day") .ValueField("Oranges") .Name("My oranges") .Type(SeriesType.Bar) .Color("#ffaa66") ) .DataSource(new[] { new { Day = "Monday", Oranges = 3 }, new { Day = "Tuesday", Oranges = 2 }, new { Day = "Wednesday", Oranges = 3 }, new { Day = "Thursday", Oranges = 4 }, new { Day = "Friday", Oranges = 6 }, new { Day = "Saturday", Oranges = 11 }, new { Day = "Sunday", Oranges = 4 } }) )
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 StandardBar() { return View(); } } }
#chart { height: 440px; }

Bind to Data

You can bind the Bar chart to one of the following data sources:

In this demo, the Bar chart is populated with data taken from a simple JavaScript array.

Configure Series

Assign one or several series to the series property and specify the following settings:

  • The series type

  • Data source fields. Assign an appropriate field name to the argumentField and valueField properties if you want to bind a series to data directly. Alternatively, you can use a series template to bind series to data if a data source field contains names for series.

  • Optional. The barWidth property to specify individual series' bar width. See the Specify the Bar Width article for more information.

You can also use the commonSeriesSettings object to configure all series in the Bar chart.

Customize Bar Chart

You can show point labels to make the Bar chart more informative.

To help a user identify a series among others on the chart legend, specify its name.

If you want to change the default series color, use the color property.