Vue Notus Chartjs
The Chart.js charts refer to a graphical representation of data. Keep reading these simple yet flexible Javascript charting for designers & developers.
Usage
In order to use this plugin, you will have to import it like so:
import Chart from "chart.js";Also, do not forget to install it:
npm i -E [email protected]After that, simply copy one of the code examples demonstrated below and include it in your page.
Examples
Line Chart Example
Overview
Sales value
<template>
<div
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700"
>
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
<div class="flex flex-wrap items-center">
<div class="relative w-full max-w-full flex-grow flex-1">
<h6 class="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
Overview
</h6>
<h2 class="text-white text-xl font-semibold">
Sales value
</h2>
</div>
</div>
</div>
<div class="p-4 flex-auto">
<!-- Chart -->
<div class="relative h-350-px">
<canvas id="line-chart"></canvas>
</div>
</div>
</div>
</template>
<script>
import Chart from "chart.js";
export default {
mounted: function () {
this.$nextTick(function () {
var config = {
type: "line",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: new Date().getFullYear(),
backgroundColor: "#9ae6b4",
borderColor: "#9ae6b4",
data: [65, 78, 66, 44, 56, 67, 75],
fill: false,
},
{
label: new Date().getFullYear() - 1,
fill: false,
backgroundColor: "#ed64a6",
borderColor: "#ed64a6",
data: [40, 68, 86, 74, 56, 60, 87],
},
],
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: "Sales Charts",
fontColor: "white",
},
legend: {
labels: {
fontColor: "white",
},
align: "end",
position: "bottom",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
scales: {
xAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Month",
fontColor: "white",
},
gridLines: {
display: false,
borderDash: [2],
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.3)",
zeroLineColor: "rgba(0, 0, 0, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
yAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Value",
fontColor: "white",
},
gridLines: {
borderDash: [3],
borderDashOffset: [3],
drawBorder: false,
color: "rgba(255, 255, 255, 0.15)",
zeroLineColor: "rgba(33, 37, 41, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
},
},
};
var ctx = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(ctx, config);
});
},
};
</script>This component is already defined inside src/components/Cards/CardLineChart.vue. Check it out.
Bar Chart Example
Performance
Total orders
<template>
<div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
>
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
<div class="flex flex-wrap items-center">
<div class="relative w-full max-w-full flex-grow flex-1">
<h6 class="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
Performance
</h6>
<h2 class="text-blueGray-700 text-xl font-semibold">
Total orders
</h2>
</div>
</div>
</div>
<div class="p-4 flex-auto">
<div class="relative h-350-px">
<canvas id="bar-chart"></canvas>
</div>
</div>
</div>
</template>
<script>
import Chart from "chart.js";
export default {
mounted: function () {
this.$nextTick(function () {
let config = {
type: "bar",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: new Date().getFullYear(),
backgroundColor: "#ed64a6",
borderColor: "#ed64a6",
data: [30, 78, 56, 34, 100, 45, 13],
fill: false,
barThickness: 8,
},
{
label: new Date().getFullYear() - 1,
fill: false,
backgroundColor: "#38a169",
borderColor: "#38a169",
data: [27, 68, 86, 74, 10, 4, 87],
barThickness: 8,
},
],
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: "Orders Chart",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
legend: {
labels: {
fontColor: "rgba(0,0,0,.4)",
},
align: "end",
position: "bottom",
},
scales: {
xAxes: [
{
display: false,
scaleLabel: {
display: true,
labelString: "Month",
},
gridLines: {
borderDash: [2],
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.3)",
zeroLineColor: "rgba(33, 37, 41, 0.3)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
yAxes: [
{
display: true,
scaleLabel: {
display: false,
labelString: "Value",
},
gridLines: {
borderDash: [2],
drawBorder: false,
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.2)",
zeroLineColor: "rgba(33, 37, 41, 0.15)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
},
},
};
let ctx = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(ctx, config);
});
},
};
</script>This component is already defined inside src/components/Cards/CardBarChart.vue. Check it out.
Props
If you want to see more examples and properties please check the official ChartJS Documentation.
You can also check the Official ChartJS Github Repository.