Drawing a chart to show average values in a column when Scene Layer is selected

[EniolaBabatunde]

Trying to create a chart based on average values in a column, tried usiing this script, where Z is the column that has my values, but the chart doesn't work, the values are also below zero but my chart axis seem to start from -1

 function updateSceneLayer() {
 const query = sceneLayerView.createQuery();
 query.geometry = sketchGeometry;
 query.distance = bufferSize;
 return sceneLayerView.queryObjectIds(query).then(highlightBuildings);
 }

var depthChart = null;

function queryStatistics() {
 const statDefinitions = [
 {
 onStatisticField:
 "Z",
 outStatisticFieldName: "depth",
 statisticType: "avg"
 }
 ];
 const query = sceneLayerView.createQuery();
 query.geometry = sketchGeometry;
 query.distance = bufferSize;
 query.outStatistics = statDefinitions;

return sceneLayerView.queryFeatures(query).then(function(result) {
 const allStats = result.features[0].attributes;
 
 updateChart(depthChart, [
 allStats.depth
 
 ]);
 }, console.error);
 }

// Updates the given chart with new data
 function updateChart(chart, dataValues) {
 chart.data.datasets[0].data = dataValues;
 chart.update();
 }

function createDepthChart() {
 const depthCanvas = document.getElementById("depth-chart");
 yearChart = new Chart(depthCanvas.getContext("2d"), {
 type: "horizontalBar",
 data: {
 labels: [
 "A1"
 ],
 datasets: [
 {
 label: "Depth",
 backgroundColor: "#149dcf",
 stack: "Stack 0",
 data: [0]
 }
 ]
 },
 options: {
 responsive: true,
 legend: {
 display: true
 },
 title: {
 display: true,
 text: "xx"
 },
 scales: {
 xAxes: [
 {
 stacked: true,
 ticks: {
 beginAtZero: false,
 precision: 0
 }
 }
 ],
 yAxes: [
 {
 stacked: true
 }
 ]
 }
 }
 });
 }