pianello-api/resources/js/components/line-chart/index.js
Ale Gallo 82f958e5da Committing laravel (part 3)
committing js templating files and components
2023-11-10 16:00:59 +01:00

98 lines
3.3 KiB
JavaScript

(function () {
"use strict";
// Chart
if ($(".line-chart").length) {
let ctx = $(".line-chart")[0].getContext("2d");
let myChart = new Chart(ctx, {
type: "line",
data: {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
datasets: [
{
label: "Html Template",
data: [
0, 200, 250, 200, 500, 450, 850, 1050, 950, 1100,
900, 1200,
],
borderWidth: 2,
borderColor: getColor("primary"),
backgroundColor: "transparent",
pointBorderColor: "transparent",
tension: 0.4,
},
{
label: "VueJs Template",
data: [
0, 300, 400, 560, 320, 600, 720, 850, 690, 805,
1200, 1010,
],
borderWidth: 2,
borderDash: [2, 2],
borderColor: $("html").hasClass("dark")
? getColor("slate.400", 0.6)
: getColor("slate.400"),
backgroundColor: "transparent",
pointBorderColor: "transparent",
tension: 0.4,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: getColor("slate.500", 0.8),
},
},
},
scales: {
x: {
ticks: {
font: {
size: "12",
},
font: getColor("slate.500", 0.8),
},
grid: {
display: false,
drawBorder: false,
},
},
y: {
ticks: {
font: {
size: "12",
},
color: getColor("slate.500", 0.8),
callback: function (value, index, values) {
return "$" + value;
},
},
grid: {
color: $("html").hasClass("dark")
? getColor("slate.500", 0.3)
: getColor("slate.300"),
borderDash: [2, 2],
drawBorder: false,
},
},
},
},
});
}
})();