Change shape of labels vue-chartjs

79 Views Asked by At

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>


0

There are 0 best solutions below