DevExtreme 14.2.6

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="http://cdn3.devexpress.com/jslib/14.2.6/js/dx.all.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.6/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.6/css/dx.light.css">
<div id="chart"></div>

CSS

.circle {
    fill: red;
}

JavaScript

var clicked = function(p) {
    alert(p.element[1]);
     var element = p.element[0];
     var group = d3.select(element)
                 .select("svg")
                   .append("g")
                   .attr("transform", "translate("+ [p.target.x, p.target.y] +")")
                   .append("circle")
                   .attr({ cx : 0, cy: 0, r: 10, class: "circle"});
};

var dataSource = [{
	country: "USA",
	hydro: 59.8,
	oil: 937.6,
	gas: 582,
	coal: 564.3,
	nuclear: 187.9
}, {
	country: "China",
	hydro: 74.2,
	oil: 308.6,
	gas: 35.1,
	coal: 956.9,
	nuclear: 11.3
}, {
	country: "Russia",
	hydro: 40,
	oil: 128.5,
	gas: 361.8,
	coal: 105,
	nuclear: 32.4
}, {
	country: "Japan",
	hydro: 22.6,
	oil: 241.5,
	gas: 64.9,
	coal: 120.8,
	nuclear: 64.8
}, {
	country: "India",
	hydro: 19,
	oil: 119.3,
	gas: 28.9,
	coal: 204.8,
	nuclear: 3.8
}, {
	country: "Germany",
	hydro: 6.1,
	oil: 123.6,
	gas: 77.3,
	coal: 85.7,
	nuclear: 37.8
}];
$("#chart").dxChart({
    dataSource: dataSource,
    commonSeriesSettings: {
        argumentField: "country",
        type: "bar"
    },
    onPointClick: function(p) {
       clicked(p); 
    },
    resolveLabelOverlapping: 'stack',
    margin: {
        bottom: 20
    },
	argumentAxis: {
		valueMarginsEnabled: false,
		discreteAxisDivisionMode: "crossLabels",
		grid: {
			visible: true
		}
	},
    series: [
        { valueField: "hydro", name: "Hydro-eppp
lectric" },
        { valueField: "oil", name: "Oil" },
        { valueField: "gas", name: "Natural gas" },
        { valueField: "coal", name: "Coal" },
        { valueField: "nuclear", name: "Nuclear" }
    ],
    legend: {
        verticalAlignment: "bottom",
        horizontalAlignment: "center",
        itemTextPosition: "bottom"
    },
    title: "Energy Consumption in 2004 (Millions of Tons, Oil Equivalent)",
});