This should be a simple matter, but I'm not sure why the scales
/legend
configuration doesn't recognize the drawBorder
setting.
Razor Page
<html>
<head>
<script src="~/Chart.js/chart.min.js"></script>
<script src="~/jquery/jquery.min.js"></script>
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style>
#chart_container {
width: 1400px;
height: 620px;
border: 1px solid #808080;
padding: 1px;
border-radius: 4px;
display: block;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container p-1">
<div class="row pt-2">
<div class="col-6">
<h2 class="text-primary">Dashboard: Pie Graph</h2>
</div>
<div class="col-6 text-right">
<a asp-action="Index" class="btn btn-primary"><i class="fas fa-sign-out-alt"></i>Back</a>
</div>
</div>
<div class="form-group row my-2" id="chart_container">
<div class="col-12">
<canvas id="co2_bar_chart"></canvas>
</div>
<div class="col-12">
<canvas id="temp_bar_chart"></canvas>
</div>
<div class="col-12">
<canvas id="rh_bar_chart"></canvas>
</div>
</div>
<script>
var co2RepArray = @Json.Serialize(ViewBag.CO2REP);
var CO2Array = @Json.Serialize(ViewBag.CO2View);
var co2_ctx = $("#co2_bar_chart");
var co2BarChart = new Chart(co2_ctx, {
type: 'pie',
data: {
labels: CO2Array,
datasets: [{
label: "Pie Chart (CO2)",
data: co2RepArray,
backgroundColor: ["rgba(242, 168, 54, .5)", "rgba(145, 65, 72, .5)", "rgba(74, 25, 92, .5)"],
backgroundColor: ["rgba(242, 168, 54)", "rgba(145, 65, 72)", "rgba(74, 25, 92)"],
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: { beginAtZero: true },
}]
},
legend: {
display: false,
yAxes: [{
gridLines: {
display: false,
drawBorder: false,
}
}],
xAxes: [{
gridLines: {
display: false,
drawBorder: false,
}
}]
}
}
});
</script>
</div>
</body>
</html>
I have also tried
scales: {
yAxes: [{
gridLines : {
display: false,
drawBorder: false,
}
}],
xAxes: [{
gridLines : {
display: false,
drawBorder: false,
}
}]
}
And
scales: {
x: {
grid: {
display: false,
drawBorder: false,
drawOnChartArea: false,
drawTicks: false,
}
y: {
grid: {
display: false,
drawBorder: false,
drawOnChartArea: false,
drawTicks: false,
}
}
Can I check what I am missing to remove the borderlines arrowed