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',
}
}
},
}
}
};
|