dashboard-core/theme/dbd-soft-ui/views/partials/graph.ejs

<%
const data = customThemeOptions.graph;
let currentScheme = themeConfig.colorScheme;
let colone;
let coltwo;
let gradone;
let gradtwo;

function hexToRgba(hex, alpha) {
	var r = parseInt(hex.substring(1,3), 16);
	var g = parseInt(hex.substring(3,5), 16);
	var b = parseInt(hex.substring(5,7), 16);

	return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
}

if (currentScheme == "blue") {
	colone = "#21d4fd";
	coltwo = "#2152ff";
	gradone = "rgba(33,212,253,0.1)";
	gradtwo = "rgba(33,82,255,0.1)";
}
if (currentScheme == "pink") {
	colone = "#FF0080";
	coltwo = "#7928CA";
	gradone = "rgba(255,0,128,0.1)";
	gradtwo = "rgba(121,40,202,0.1)";
}
if (currentScheme == "red") {
	colone = "#ea0606";
	coltwo = "#ff667c";
	gradone = "rgba(255,102,124,0.1)";
	gradtwo = "rgba(234,6,6,0.1)";
}
if (currentScheme == "green") {
	colone = "#17ad37";
	coltwo = "#98ec2d";
	gradone = "rgba(23,173,55,0.1)";
	gradtwo = "rgba(152,236,45,0.1)";
}
if (currentScheme == "yellow") {
	colone = "#f53939";
	coltwo = "#fbcf33";
	gradone = "rgba(245,57,57,0.1)";
	gradtwo = "rgba(251,207,51,0.1)";
}
if (currentScheme == "dark") {
	colone = "#141727";
	coltwo = "#3A416F";
	gradone = "rgba(20,23,39,0.1)";
	gradtwo = "rgba(58,65,111,0.1)";
}
if (currentScheme == "custom") {
	if (!themeConfig.themeColors || !themeConfig.themeColors.primaryColor || !themeConfig.themeColors.secondaryColor) {
		currentCode = "310deg, #7928CA 0%, #FF0080 100%";
		colone = "#FF0080";
		coltwo = "#7928CA";
		gradone = "rgba(255,0,128,0.1)";
		gradtwo = "rgba(121,40,202,0.1)";
	} else {
		currentCode = "310deg, " + themeConfig.themeColors.primaryColor + " 0%, " + themeConfig.themeColors.secondaryColor + " 100%";
		colone = themeConfig.themeColors.primaryColor;
		coltwo = themeConfig.themeColors.secondaryColor;
		gradone = hexToRgba(themeConfig.themeColors.primaryColor, 0.1);
		gradtwo = hexToRgba(themeConfig.themeColors.secondaryColor, 0.1);
	}
}
%>
<script>
	<%
	let graphType = "chart-bars"; // line-graph
	if (!themeConfig.index.graph.lineGraph) graphType = "chart-line";
	%>
	let ctx = document.getElementById("<%- graphType %>").getContext("2d"); // line graph

	<% if(graphType === "chart-bars") { %>
	new Chart(ctx, {
		type: "bar",
		data: {
			labels: <%- JSON.stringify(customThemeOptions.graph.labels) %>,
			datasets: [{
				label: "<%= themeConfig.index.graph.tag %>",
				tension: 0.4,
				borderWidth: 0,
				borderRadius: 4,
				borderSkipped: false,
				backgroundColor: "#fff",
				data: <%- JSON.stringify(data.values) %>,
				maxBarThickness: 6
			},],
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			plugins: {
				legend: {
					display: false,
				}
			},
			interaction: {
				intersect: false,
				mode: 'index',
			},
			scales: {
				y: {
					grid: {
						drawBorder: false,
						display: false,
						drawOnChartArea: false,
						drawTicks: false,
					},
					ticks: {
						suggestedMin: 0,
						suggestedMax: 500,
						beginAtZero: true,
						padding: 15,
						font: {
							size: 14,
							family: "Open Sans",
							style: 'normal',
							lineHeight: 2
						},
						color: "#fff"
					},
				},
				x: {
					grid: {
						drawBorder: false,
						display: false,
						drawOnChartArea: false,
						drawTicks: false
					},
					ticks: {
						display: false
					},
				},
			},
		},
	});
	<% } else { %>

	var gradientStroke1 = ctx.createLinearGradient(0, 230, 0, 50);

	gradientStroke1.addColorStop(1, '<%= colone %>');
	gradientStroke1.addColorStop(0.1, '<%= gradone %>');
	gradientStroke1.addColorStop(0, '<%= gradtwo %>'); //purple colors

	new Chart(ctx, {
		type: "line",
		data: {
			labels: <%- JSON.stringify(customThemeOptions.graph.labels) %>,
			datasets: [{
				label: "<%= themeConfig.index.graph.tag %>",
				tension: 0.4,
				borderWidth: 0,
				pointRadius: 0,
				borderColor: "<%- colone %>",
				borderWidth: 3,
				backgroundColor: gradientStroke1,
				fill: true,
				data: <%- JSON.stringify(data.values) %>,
				maxBarThickness: 6

			},
			],
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			plugins: {
				legend: {
					display: false,
				}
			},
			interaction: {
				intersect: false,
				mode: 'index',
			},
			scales: {
				y: {
					suggestedMin: 0,
					suggestedMax: <%- themeConfig.index.graph.max %>,
					grid: {
						drawBorder: false,
						display: true,
						drawOnChartArea: true,
						drawTicks: false,
						borderDash: [5, 5]
					},
					ticks: {
						display: true,
						padding: 10,
						color: '#b2b9bf',
						font: {
							size: 11,
							family: "Open Sans",
							style: 'normal',
							lineHeight: 2
						},
					}
				},
				x: {
					grid: {
						drawBorder: false,
						display: false,
						drawOnChartArea: false,
						drawTicks: false,
						borderDash: [5, 5]
					},
					ticks: {
						display: true,
						color: '#b2b9bf',
						padding: 20,
						font: {
							size: 11,
							family: "Open Sans",
							style: 'normal',
							lineHeight: 2
						},
					}
				},
			},
		},
	});
	<% } %>
</script>