Chart Js

OverviewOfficial Website

Chart js is a simple yet flexible javaScript charting for designers & developers.

Import Package
<!-- ChartJS -->
import Vue3ChartJs from "@j-t-mcc/vue3-chartjs";
Add Package
yarn add j-t-mcc/vue3-chartjs --save
Remove Package
yarn remove j-t-mcc/vue3-chartjs or you can remove package by removing specific package from package.json
Examples
Title Example
Line Chart
const line = {
type: "line",
data: {
    labels: [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    ],
    datasets: [{
        label: "Sales Analytics",
        fill: true,
        lineTension: 0.5,
        backgroundColor: "rgba(85, 110, 230, 0.2)",
        borderColor: "#405189",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "#405189",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#405189",
        pointHoverBorderColor: "#fff",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80],
    },
    {
        label: "Monthly Earnings",
        fill: true,
        lineTension: 0.5,
        backgroundColor: "rgba(235, 239, 242, 0.2)",
        borderColor: "#0AB39C",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "#0AB39C",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#0AB39C",
        pointHoverBorderColor: "#eef0f2",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36],
    },
    ],
},
options: {
    x: {
    ticks: {
        font: {
        family: 'Poppins',
        },
    },
    },
    y: {
    ticks: {
        font: {
        family: 'Poppins',
        },
    },
    },
    plugins: {
    legend: {
        labels: {
        // This more specific font property overrides the global property
        font: {
            family: 'Poppins',
        }
        }
    },
    },
},

};
Bar Chart
const bar = {
type: "bar",
data: {
    labels: [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    ],
    datasets: [{
    barPercentage: 0.4,
    label: "Sales Analytics",
    backgroundColor: "rgba(52, 195, 143, 0.8)",
    borderColor: "rgba(52, 195, 143, 0.8)",
    borderWidth: 1,
    hoverBackgroundColor: "rgba(52, 195, 143, 0.9)",
    hoverBorderColor: "rgba(52, 195, 143, 0.9)",
    data: [65, 59, 81, 45, 56, 80, 50, 20],
    }, ],
},
options: {
    x: {
    ticks: {
        font: {
        family: 'Poppins',
        },
    },
    },
    y: {
    ticks: {
        font: {
        family: 'Poppins',
        },
    },
    },
    plugins: {
    legend: {
        labels: {
        font: {
            family: 'Poppins',
        }
        }
    },
    }
}
};
© Velzon.
Design & Develop by Themesbrand