https://i.sstatic.net/7CzRg.png
Is there a way to disable the scale with additional marks from 0 to 45000 as shown in the screenshot? I've attempted various solutions, including updating chartjs to the latest version, but I'm specifically interested in addressing this issue in version 3.7.1. Additionally, there's an issue where the label at the top (100%) is being cut off, and I haven't been able to find a solution for that yet.
Possible solutions:
export const chartOptions: ICustomChartOptions = {
responsive: true,
layout: {},
elements: {
bar: {
borderRadius: 4,
},
line: {
borderWidth: 3,
},
point: {
backgroundColor: '#FFFFFF',
borderWidth: 2,
radius: 4,
},
},
clip: false,
scales: {
x: {
grid: {
display: false,
},
ticks: {
font: {
size: 10,
},
},
min: 0,
max: 100000,
},
y: {
position: 'left',
grid: {
drawBorder: false,
},
ticks: {
callback: function (value) {
return `${value}%`;
},
stepSize: 25,
font: {
size: 10,
},
},
min: 0,
max: 100,
beginAtZero: true,
},
},
plugins: {},
};
Update: This is the data used for the chart
export const chartData: ChartData<'line'> = {
labels: chartLabels,
datasets: [
{
type: 'line',
// yAxisID: 'line',
data: [100, 20, 49, 10, 97],
order: 1,
datalabels: {
anchor: 'start',
align: 'end',
color: color['Purple/Purple 80'],
formatter(value) {
return `${value}%`;
},
},
},
{
type: 'bar' as 'line',
yAxisID: 'bar',
data: [22000, 17500, 12000, 10000, 44000],
order: 2,
datalabels: {
align: 'end',
},
},
],
};
Update 2: When displaying values, I utilize ChartDataLabels plugin.