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.wikipedia.org

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.chartOptions = { dataSource: dataSource, commonSeriesSettings: { argumentField: "state", type: "bar", hoverMode: "allArgumentPoints", selectionMode: "allArgumentPoints", label: { visible: true, format: { type: "fixedPoint", precision: 0 } } }, series: [ { valueField: "year2018", name: "2018" }, { valueField: "year2017", name: "2017" }, { valueField: "year2016", name: "2016" } ], title: "Gross State Product within the Great Lakes Region", legend: { verticalAlignment: "bottom", horizontalAlignment: "center" }, "export": { enabled: true }, onPointClick: function (e) { e.target.select(); } }; });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/21.1.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div id="chart" dx-chart="chartOptions"></div> </div> </body> </html>
    #chart { height: 440px; }
    var dataSource = [{ state: "Illinois", year2016: 803, year2017: 823, year2018: 863 }, { state: "Indiana", year2016: 316, year2017: 332, year2018: 332 }, { state: "Michigan", year2016: 452, year2017: 459, year2018: 470 }, { state: "Ohio", year2016: 621, year2017: 642, year2018: 675 }, { state: "Wisconsin", year2016: 290, year2017: 294, year2018: 301 }];