Hello,
I try to render my chartjs config via quickchart, but it fails with the following error message:
Chart error: Error: Type Error: c.ctx.save is not a function
I think it does not pass the context of something like that.
Could you help me please? Here is my config. It works fine with chartjs 4.x in browser, but fails inside the quickchart. Something is wrong with the context.
{
type: 'line',
data: {
labels: ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
datasets: [{
label: 'Attempting To Engage',
showInLegend: false,
data: [null, null, 0, 40, 25, 68, 45, 55, 50, 70, 48, 46],
tension: 0.5,
clip: false,
borderCapStyle: 'round',
borderJoinStyle: 'round',
borderColor: '#FFBE46',
borderWidth: 3,
pointBackgroundColor: '#FFBE46',
pointBorderWidth: 0,
pointRadius: 0,
pointHoverBackgroundColor: '#FFBE46',
pointHoverBorderWidth: 0,
pointHoverRadius: 0,
borderDash: [2, 6],
}, {
label: 'Engaged',
showInLegend: false,
data: [16, 20, 13, 15, 20, 9, 15, 16, 9, 11, 22, 21],
tension: 0.5,
clip: false,
borderCapStyle: 'round',
borderJoinStyle: 'round',
borderColor: '#00ACE8',
borderWidth: 9,
pointBackgroundColor: '#00ACE8',
pointBorderWidth: 0,
pointRadius: 0,
pointHoverBackgroundColor: '#00ACE8',
pointHoverBorderWidth: 0,
pointHoverRadius: 0,
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
},
border: {
display: false,
},
ticks: {
color: '#333',
maxRotation: 90,
minRotation: 90,
},
},
y: {
min: 0,
max: 100,
ticks: {
stepSize: 10,
// color: function(context) {
// // if (context.tick.value === 90) {
// // return '#FFBE46';
// // }
// return '#333';
// },
callback: function(value) {
return `${value}%`;
},
},
grid: {
display: true,
// color: function(context) {
// // if (context.tick.value === 90) {
// // return 'rgba(255, 190, 70, 0.37)';
// // }
// return 'rgba(0, 0, 0, 0)';
// },
tickBorderDash: [1, 2],
},
border: {
display: false,
dash: [1, 2],
},
},
},
interaction: {
intersect: false,
mode: 'index',
},
plugins: {
legend: {
position: 'bottom',
align: 'start',
display: true,
labels: {
usePointStyle: true,
},
},
},
},
plugins: [{
afterDraw: function(c) {
c.ctx.save();
c.ctx.fillStyle = '#FFBE46';
const goalDimensions = c.ctx.measureText('Goal');
const x = c.chartArea.width + c.chartArea.left - goalDimensions.width;
const y = c.scales.y.getPixelForValue(goalValue) + goalDimensions.hangingBaseline / 2;
c.ctx.fillText(goalLabel, x, y);
c.ctx.restore();
}
}]
}