Your search did not match any results.
Bar Charts

Bi-Directional Bar Chart

Documentation

This demo shows how to create a bi-directional bar chart. This is a rotated stacked bar chart with half of its data source values converted from positive to negative.

@(Html.DevExtreme().Chart() .ID("chart") .Title("Population Pyramid For Norway 2016") .Rotated(true) .BarGroupWidth(18) .CommonSeriesSettings(s => s .ArgumentField("Age") .Type(SeriesType.StackedBar) ) .Series(s => { s.Add() .ValueField("Male") .Name("Male") .Color("#3F7FBF"); s.Add() .ValueField("Female") .Name("Female") .Color("#F87CCC"); }) .Tooltip(t => t .Enabled(true) .CustomizeTooltip(@<text> function (arg) { return { text: Math.abs(arg.valueText) }; } </text>) ) .ValueAxis(a => { a.Add() .Label(l => l.CustomizeText(@<text> function (arg) { return Math.abs(arg.value) + "%"; } </text>)); }) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) .Margin(m => m.Left(50)) ) .DataSource(Model) )
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; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult BiDirectionalBarChart() { return View(SampleData.PopulationPyramidData); } } }
#chart { height: 549px; width: 820px; margin: 0 auto; }