Currently, I am attempting to retrieve the values for the x and y axis when clicking on the chart area. Here is what I have so far:
HTML:
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72131c15071e13005c180132435c" rel="noopener noreferrer">[email protected]</a>" src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"></script>
<script data-require="d3@*" data-semver="3.3.11" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
<div ac-chart="'area'" ac-data="barData" ac-config="config" id='chart2' class='chart' style="width: 100%"></div>
JS:
$scope.config = {
title: 'Customer Distribution',
tooltips: true,
labels: false,
mouseover: function () {
},
mouseout: function () {
},
click: function (d) {
console.log(d);
console.log(angular.toJson(d));
},
isAnimate: true,
waitForHeightAndWidth: false,
legend: {
display: true,
position: 'right',
htmlEnabled: false
}
};
var sin = [];
if (angular.equals(bin, "UNIT")) {
angular.forEach(data, function (item) {
var y = [];
y.push(item.customerListSize);
sin.push({x: item.value, y: y});
});
} else {
angular.forEach(data, function (item) {
var y = [];
y.push(item.totalBinSize);
sin.push({x: item.binName, y: y});
});
}
$scope.barData = {
series: [featureType],
data: sin
};
The charts are displaying correctly, however, I would like to enhance the functionality of the click event. I need to obtain the x and y values of the chart when clicked in order to update the tooltip and call another method using those values. Can someone please advise me on how to retrieve the values upon click? When I tried printing the console on click, it only displays the screen position.