Закруглите углы области гистограммы Google. ⇐ CSS

[Anonymous]

Фрагмент кода для получения выходных данных:
Использовалась гистограмма Google. Невозможно скруглить углы области диаграммы.

Код: Выделить всё

google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(fetchJSONData);

// Set Data
function fetchJSONData() {
fetch("./data.json")
.then((res) => {
if (!res.ok) {
throw new Error(`HTTP error! Status: ${res.status}`);
}
return res.json();
})
.then((data) => {
console.log(data[0].amount);
var datavis = new google.visualization.DataTable();
datavis.addColumn("string", "Day");
datavis.addColumn("number", "Amount");
datavis.addColumn({
role: "tooltip",
p: { html: true },
});
datavis.addColumn({ type: "string", role: "style" });
var len = data.length;
//console.log("length of array:" + len);
//datavis.addRows(len);
const d = new Date();
let day = d.getDay();
if (day === 0) day = 6;
else day = day - 1;
//console.log("day" + d);
for (var i = 0; i < len;  i++) {
if (i === day)
datavis.addRow([
data[i].day,
data[i].amount,
"$" + data[i].amount,
"color:#76B5BC",
]);
else
datavis.addRow([
data[i].day,
data[i].amount,
"$" + data[i].amount,
"",
]);
// datavis.setValue(i, 0, data[i].day);
// datavis.setValue(i, 1, data[i].amount);
}
//var datavis = google.visualization.arrayToDataTable([
// ["Country", "Mhl", { role: "tooltip", p: { html: true } }],
// ["Italy", 54.8, "54.8T"],
// ["France", 48.6, "54.8T"],
// ["Spain", 44.4, "54.8T"],
// ["USA", 23.9, "54.8T"],
// ["Argentina", 14.5, "54.8T"],
//]);

// Set Options
var chartColor = "#ec775f";
var options = {
title: "Spending - Last 7 days",
backgroundColor: "#FFFAF5",

titleTextStyle: {
color: "#382314",
fontName: "DM Sans",
fontSize: 18,
},
tooltip: { isHtml: true },
allowHtml: true,
vAxis: {
textPosition: "none",
baselineColor: "none",
gridlines: { count: 0 },
},
hAxis: {
textStyle: { color: "#93867B", fontName: "DM Sans" },
},
legend: { position: "none" },
colors: [chartColor],
};

// Draw

var container = document.getElementById("columnchart_material");
var chart = new google.visualization.ColumnChart(container);

google.visualization.events.addListener(
chart,
"ready",
changeBorderRadius
);

google.visualization.events.addListener(
chart,
"select",
changeBorderRadius
);
google.visualization.events.addListener(
chart,
"onmouseover",
chartMouseOver
);
google.visualization.events.addListener(
chart,
"onmouseout",
chartMouseOut
);
chart.draw(datavis, options);

function changeBorderRadius() {
chartColumns = container.getElementsByTagName("rect");
//console.log("chart column" + chartColumns);
Array.prototype.forEach.call(chartColumns, function (column) {
column.setAttribute("rx", 5);
column.setAttribute("ry", 5);
column.setAttribute("stroke", "none");
column.setAttribute("stroke-width", 0);
});
}

function setBarOpacity(index, opacity) {
var chart1 = new google.visualization.ColumnChart(
document.getElementById("columnchart_material")
);
// filter bars by fill color
var chartBars = chart1
.getContainer()
.querySelectorAll(
'rect[fill="' + "#ec775f" + '"],rect[fill="' + "#76b5bc" + '"]'
);

// console.log("chartBars" + chartBars[index]);
// chartBars[index].setAttribute("stroke", "none");
//chartBars[index].setAttribute("stroke-width", 0);
// set opacity on index provided
chartBars[index].setAttribute("opacity", opacity);
}

function chartMouseOver(sender) {
changeBorderRadius();
// set opacity to 0.5

setBarOpacity(sender.row, 0.8);
}

// chart mouseout event
function chartMouseOut(sender) {
// set opacity to 1

changeBorderRadius();
setBarOpacity(sender.row, 1);
}
})
.catch((error) =>  console.error("Unable to fetch data:", error));
}

//console.log("expdata:" + data[0].amount);

Код: Выделить всё

Frontend Mentor | Expenses chart component



.main {
display: flex;
flex-direction: column;

color: "#fffaf5";
}

.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}

.google-visualization-tooltip {
color: white !important;
background-color: rgb(11, 11, 11) !important;
font-family: "DM Sans", sans-serif !important;
border-radius: 18% !important;
padding: 0.3% 0.3% 0.3% 0.3% !important;
align-content: center !important;
margin-left: -9% !important;
border: none !important;
}







My balance
$921.48

id="columnchart_material"
style="width: 700px; height: 400px; padding-left: 0.1%"
>

Total this month $478.33 +2.4% from last month

Challenge by
[url=https://www.frontendmentor.io?ref=challenge]Frontend Mentor. Coded by Aparna Gopalakrishnan[/url].

**Какие параметры или код можно написать, чтобы скруглить углы область диаграммы Google? **
Я новичок в кодировании Javascript.
Ниже приведены выходные данные кода
[img]https:/ /i.sstatic.net/md3g7cbD.png[/img]
`


Область диаграммы (светло-оранжевого цвета) округлена в ожидаемом результате.

Подробнее здесь: https://stackoverflow.com/questions/785 ... chart-area