I'm using vue-chartjs to display some charts, the labels show rectangle shape beside them, i want to change that shape from rectangle to circle, how can i do that ?
<script setup>
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
BarElement,
} from "chart.js";
import { Line, Bar } from "vue-chartjs";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
BarElement
);
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Data One",
backgroundColor: "#3d5ee1",
data: [40, 39, 10, 40, 39, 80, 40],
borderColor: "#3d5ee1",
},
{
label: "Data Two",
backgroundColor: "#2c323f",
data: [2, 43, 12, 76, 23, 63, 24],
borderColor: "#2c323f",
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
};
</script>
<template>
<template #content>
<div class="row my-5 gx-5">
<div class="col-md-6">
<Line :data="data" :options="options" class="chart" />
</div>
<div class="col-md-6">
<Bar :data="data" :options="options" class="chart" />
</div>
</div>
</template>
</template>