How to highlight cell in Anychart table when I click on that cell - anychart

Question

Is there any way to highlight a cell in an Anychart table when I click on the cell?
I tried the following code, but it doesn't work.
table.listen("click",function(e){e.cellBorder(" #ff0000")});

Answer 1

Unfortunately, the current version of AnyChart 8.2.1 tables does not support events. But you can implement this functionality with some extra code. For details, please, check the sample below.
anychart.onDocumentReady(function () {
// set stage
var stage = anychart.graphics.create("container");
// create table
var table = anychart.standalones.table();
// set table content
table.contents([
[
null,
"2003 Sales",
"2004 Sales"
],[
"January",
"$10000",
"$12000"
],[
"February",
"$12000",
"$15000"
],[
"March",
"$18000",
"$16000"
],[
"April",
"$11000",
"$15000"
],
[
"May",
"$9000",
"$14000"
]
]);
var contents = table.contents();
// Set rows height.
table.rowsHeight(70);
table.getRow(0).fontWeight(900);
table.getCol(0).width(70).fontWeight(900); // Set first column width 70 px and bold the text
table.getCol(1).width(300);
table.getCol(2).width(300);
table.cellFill("#E1E1E1"); // Set table background color
// adjust table border and position text in each cell into center
table.cellBorder("#B8B8B8").vAlign("middle").hAlign("center");
// set table container and initiate draw
table.container(stage).draw();
var colsCount = table.colsCount();
var widths = [];
for(var i = 0; i<colsCount;i++) {
var width = table.getCol(i).width();
widths.push(width);
}
var rowHeight = table.rowsHeight();
// buffer cell
var buffer = 0;
var cont = document.getElementById('container');
cont.addEventListener('click', function(e) {
var x = e.clientX;
var y = e.clientY;
var indX = null;
var indY = null;
if(x < widths[0]) {
indX = 0;
}
if(x> widths[0] && x<widths[0] + widths[1]) {
indX = 1;
}
if(x > widths[0] + widths[1]) {
indX = 2;
}
indY = Math.floor(y / rowHeight);
// color selected cell
if (contents[indY]) {
table.getCell(indY,indX).fill("#0000ff", 0.2);
}
// color back
if (buffer !=0) {
buffer.fill("#e1e1e1")
}
// save selected cell to buffer
if (contents[indY]) {
buffer = table.getCell(indY,indX);
}
});
});
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-table.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-ui.min.js"></script>
<div id="container"></div>