(function() {
// ==========================================
// ✏️ EDIT YOUR DATA HERE
// ==========================================
const graphTitle = “Calidad de Color | AURA 80 2700K”; // a + b, 0);
const averageValue = Number((sum / barValues.length).toFixed(1));
function renderChart() {
if (typeof Chart === ‘undefined’) {
setTimeout(renderChart, 50);
return;
}
Chart.register(ChartDataLabels);
const canvases = document.querySelectorAll(‘.custom-led-chart canvas:not(.rendered)’);
if (canvases.length === 0) return;
const myCanvas = canvases[0];
myCanvas.classList.add(‘rendered’);
const ctx = myCanvas.getContext(‘2d’);
const labels = [“Q1”, “Q2”, “Q3”, “Q4”, “Q5”, “Q6”, “Q7”, “Q8”, “Q9”, “Q10”, “Q11”, “Q12”, “Q13”, “Q14”, “Q15”];
const barColors = [‘#1f77b4’, ‘#aec7e8’, ‘#ff7f0e’, ‘#2ca02c’, ‘#98df8a’, ‘#ff9896’, ‘#9467bd’, ‘#8c564b’, ‘#c49c94’, ‘#e377c2’, ‘#7f7f7f’, ‘#bcbd22’, ‘#dbb939’, ‘#17becf’, ‘#9edae5’];
new Chart(ctx, {
type: ‘bar’,
data: {
labels: labels,
datasets: [
{
type: ‘line’,
label: ‘Qa (Promedio)’,
data: Array(15).fill(averageValue),
borderColor: ‘#c00000’,
borderWidth: 2,
borderDash: [6, 4],
pointRadius: 0,
fill: false,
order: 0,
datalabels: { display: false }
},
{
type: ‘bar’,
label: ‘Puntuación’,
data: barValues,
backgroundColor: barColors,
borderColor: ‘#555’,
borderWidth: 1,
order: 1,
datalabels: {
anchor: ‘end’,
align: ‘end’,
offset: 4,
color: ‘#222’,
font: { weight: ‘bold’, size: 13 },
backgroundColor: ‘rgba(255, 255, 255, 0.85)’,
borderRadius: 3,
padding: 2
}
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: { padding: { top: 0, bottom: 0 } }, // Keeps the entire chart flush
scales: {
y: {
beginAtZero: true,
max: 100,
title: { display: true, text: ‘Puntuación (0-100)’, font: { size: 14, weight: ‘bold’ } }
},
x: { grid: { display: false } }
},
plugins: {
// 👇 THIS IS THE NEW TITLE SECTION 👇
title: {
display: true,
text: graphTitle,
font: { size: 18, weight: ‘bold’ },
padding: { top: 0, bottom: 15 } // Small gap between title and legend
},
legend: {
display: true,
position: ‘top’,
// Adds 40px of space directly BELOW the legend line
padding: { top: 0, bottom: 40 },
labels: {
generateLabels: function(chart) {
return [{
text: ‘Qa (Promedio) = ‘ + averageValue,
fillStyle: ‘transparent’,
strokeStyle: ‘#c00000’,
lineWidth: 2,
lineDash: [6, 4]
}];
}
}
}
}
}
});
}
if (document.readyState === ‘loading’) { document.addEventListener(‘DOMContentLoaded’, renderChart); }
else { renderChart(); }
})();
(function() {
// ==========================================
// ✏️ EDIT YOUR DATA HERE
// ==========================================
const graphTitle = “Calidad de Color | AURA 80 3000K”; // a + b, 0);
const averageValue = Number((sum / barValues.length).toFixed(1));
function renderChart() {
if (typeof Chart === ‘undefined’) {
setTimeout(renderChart, 50);
return;
}
Chart.register(ChartDataLabels);
const canvases = document.querySelectorAll(‘.custom-led-chart canvas:not(.rendered)’);
if (canvases.length === 0) return;
const myCanvas = canvases[0];
myCanvas.classList.add(‘rendered’);
const ctx = myCanvas.getContext(‘2d’);
const labels = [“Q1”, “Q2”, “Q3”, “Q4”, “Q5”, “Q6”, “Q7”, “Q8”, “Q9”, “Q10”, “Q11”, “Q12”, “Q13”, “Q14”, “Q15”];
const barColors = [‘#1f77b4’, ‘#aec7e8’, ‘#ff7f0e’, ‘#2ca02c’, ‘#98df8a’, ‘#ff9896’, ‘#9467bd’, ‘#8c564b’, ‘#c49c94’, ‘#e377c2’, ‘#7f7f7f’, ‘#bcbd22’, ‘#dbb939’, ‘#17becf’, ‘#9edae5’];
new Chart(ctx, {
type: ‘bar’,
data: {
labels: labels,
datasets: [
{
type: ‘line’,
label: ‘Qa (Promedio)’,
data: Array(15).fill(averageValue),
borderColor: ‘#c00000’,
borderWidth: 2,
borderDash: [6, 4],
pointRadius: 0,
fill: false,
order: 0,
datalabels: { display: false }
},
{
type: ‘bar’,
label: ‘Puntuación’,
data: barValues,
backgroundColor: barColors,
borderColor: ‘#555’,
borderWidth: 1,
order: 1,
datalabels: {
anchor: ‘end’,
align: ‘end’,
offset: 4,
color: ‘#222’,
font: { weight: ‘bold’, size: 13 },
backgroundColor: ‘rgba(255, 255, 255, 0.85)’,
borderRadius: 3,
padding: 2
}
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: { padding: { top: 0, bottom: 0 } }, // Keeps the entire chart flush
scales: {
y: {
beginAtZero: true,
max: 100,
title: { display: true, text: ‘Puntuación (0-100)’, font: { size: 14, weight: ‘bold’ } }
},
x: { grid: { display: false } }
},
plugins: {
// 👇 THIS IS THE NEW TITLE SECTION 👇
title: {
display: true,
text: graphTitle,
font: { size: 18, weight: ‘bold’ },
padding: { top: 0, bottom: 15 } // Small gap between title and legend
},
legend: {
display: true,
position: ‘top’,
// Adds 40px of space directly BELOW the legend line
padding: { top: 0, bottom: 40 },
labels: {
generateLabels: function(chart) {
return [{
text: ‘Qa (Promedio) = ‘ + averageValue,
fillStyle: ‘transparent’,
strokeStyle: ‘#c00000’,
lineWidth: 2,
lineDash: [6, 4]
}];
}
}
}
}
}
});
}
if (document.readyState === ‘loading’) { document.addEventListener(‘DOMContentLoaded’, renderChart); }
else { renderChart(); }
})();
