I'm working on a project using Chart.js version 4.4.7, and I'm encountering an issue with the y-axis ticks. I want to replace numeric tick values (like 20, 40, 60, 80) with custom labels (e.g., "Low", "Medium", "High"). However, the chart fails to render properly when I use the ticks.callback function to modify the labels. I’ve tried various configurations but the issue persists, preventing the graph from displaying correctly. Has anyone faced a similar issue or found a solution?
Here is the code in the HTML-Element: `
<canvas id="myChart"></canvas>
</div>
<script src=".js"></script>
<script>
const context1 = document.getElementById('myChart');
window.onmessage = (event) => {
if (event.data.chart) {
console.log(`Chart ${event.data.chart}`);
// additional code here
createChart1(event.data.chart);
}
}
function createChart1(chart){
new Chart(context1, chart)
}
</script>
async function createGraphData(group, values, labels) {
try {
const graphData = group.map(key => ({
label: labels[key],
value: values[key] || 0,
}));
console.log("Graph Data Prepared for Chart:", graphData);
const config = {
//type: 'line',
data: {
labels: graphData.map(item => item.label),
datasets: [{
label: 'Mittelwert',
type: 'line',
data: [
50, 50, 50, 50, 50
],
//backgroundColor: [
// 'rgba(102, 102, 102, 0.5)',
//],
//hoverBackgroundColor: [
// 'rgba(102, 102, 102, 0.8)',
//],
pointStyle: 'dash',
pointRadius: 8,
pointHoverRadius: 12,
showLine: true,
borderDash: [10, 10],
borderWidth: 3,
borderColor: 'rgba(102, 102, 102, 1)',
},
{
label: 'Ergebnis',
type: 'bar',
data: graphData.map(item => item.value),
backgroundColor: [
'rgba(250, 183, 36, 1)',
'rgba(39, 153, 137, 1)',
'rgba(210, 49, 138, 1)',
'rgba(120, 51, 209, 1)',
'rgba(19, 162, 221, 1)'
],
hoverBackgroundColor: [
'rgba(250, 183, 36, 1)',
'rgba(39, 153, 137, 1)',
'rgba(210, 49, 138, 1)',
'rgba(120, 51, 209, 1)',
'rgba(19, 162, 221, 1)'
],
},
]
},
options: {
responsive: true,
plugins: {
legend: {
display: false,
}
},
scales: {
x: {
ticks: {
font: {
size: 16, // Tick font size
family: "Helvetica", // Custom font
// weight: "bold"
},
},
grid: {
drawOnChartArea: false
}
},
y: {
ticks: {
stepSize: 10, // Ensures only specified values appear
// Here lies the problem, apparently ——————————————————————————
// ——————————————————— > ———————————————————-
/*
formatter: function (value) {
console.log("Callback executed. Tick value:", value);
const labels = {
0: 'Very Low',
20: 'Neutral',
30: 'High',
40: 'Higher',
80: 'Very High'
};
return labels[value] || "";
},
*/
// Show label or empty if not in the list
// Custom Labels (Change numbers to text)
/*
callback: function (value) {
const labels = {
20: "Low",
30: "Low+",
40: "Medium-Low",
50: "Medium",
60: "Medium-High",
70: "High-",
80: "High"
};
return labels[value] || value; // Use label if exists, otherwise keep number
},
*/
// Formatting Numbers
precision: 0, // No decimal places
beginAtZero: false, // If you want to start from min value (20 instead of 0)
// Font & Appearance
// color: "#222", // Tick color
font: {
size: 16, // Tick font size
family: "Helvetica", // Custom font
// weight: "bold"
},
// Padding & Spacing
padding: 10, // Space between ticks and axis
z: 1, // Ensure ticks appear above grid lines
// Display Control
display: true, // Show or hide ticks
autoSkip: false, // Prevent skipping of labels
// maxTicksLimit: 3 // Maximum number of ticks displayed
}
}
}
}
};
console.log("Chart Configuration:", config);
return config;
} catch (error) {
console.error("Error in createGraphData:", error.message, error.stack);
throw error; // Re-throw error if critical
}
}
I tried to change the version to another version of charts.js. and i tried to hardcode the ticks, and do it with a callback function. I even tried to rename the callback with formatter.
I am using WIX-Velo code. and i am not sure, why it isn't work. I need some help.