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

    Drill-Down Chart

    Documentation

    This demo shows a drill-down chart with two views. The start view displays a breakdown of population by continents. When you click a bar, the detailed view reveals most populated countries on the selected continent. Data for this view is provided by applying a filter to the original data.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    @(Html.DevExtreme().Chart() .ID("chart") .Series(s => { s.Add().ArgumentField("Arg") .ValueField("Val").Type(SeriesType.Bar).TagField("ParentID"); }) .Title("The Most Populated Countries by Continents") .ValueAxis( a => a.Add() .ShowZero(false) ) .CustomizePoint("customizePoint") .Legend(l => l.Visible(false)) .DataSource(d => d.Mvc().Controller("WorldPopulationData").LoadAction("Get")) .DataSourceOptions(o => o.Filter("['ParentID', '']")) .OnPointClick("pointClickHandler") ) <div class="button-container"> @(Html.DevExtreme().Button() .ID("backButton") .Text("Back") .Icon("chevronleft") .Visible(false) .OnClick("buttonClickHandler") ) </div> <script> var isFirstLevel = true, colors = ["#6babac", "#e55253"], chartContainer; $(function () { chartContainer = $("#chart"); addPointerCursor(); }); function customizePoint() { var pointSettings = { color: colors[Number(isFirstLevel)] }; if (!isFirstLevel) { pointSettings.hoverStyle = { hatching: "none" }; } return pointSettings; } function buttonClickHandler() { if (!isFirstLevel) { isFirstLevel = true; addPointerCursor(); refreshDataSource(""); this.option("visible", false); } } function pointClickHandler(e) { if (isFirstLevel) { isFirstLevel = false; removePointerCursor(chartContainer); refreshDataSource(e.target.originalArgument); $("#backButton") .dxButton("instance") .option("visible", true); } } function refreshDataSource(argument) { var dataSource = chartContainer.dxChart("instance").getDataSource(); dataSource.filter(["ParentID", argument]); dataSource.load(); } function addPointerCursor() { chartContainer.addClass("pointer-on-bars"); } function removePointerCursor() { chartContainer.removeClass("pointer-on-bars"); } </script>
    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 ChartsDrillDown() { return View(); } } }
    #chart { height: 440px; width: 100%; } #chart.pointer-on-bars .dxc-series rect { cursor: pointer; } .button-container { text-align: center; height: 40px; position: absolute; top: 7px; left: 0px; }