Chart.js 3.7.1 remove the scale on the left with values

Question

How to turn off the scale with additional marks from 0 to 45000 which I highlighted in the screenshot? I have tried everything possible. it seems that it is possible to update chartjs to the latest version, but I'm interested in the possibility of correcting the behavior in version 3.7.1 there is also a problem that at the point at the very top where 100% the label with a value of 100 of this point is cut off, until I also found how to fix it.

Options:

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: {},
};

UPD: This is data for 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',
      },
    },
  ],
};

UPD 2 for display values, i use ChartDataLabels

Answer 1

Without the data, one can't be sure how the second axis comes to be, but I'll suppose that it is the axis for the type: "bar" part of a mixed chart. Therefore, the data might be something on the lines of (I'll spare the typings, as this is too imprecise for that):

const data = {
   labels: [....],
   datasets: [
       {
          type: "line",
          label: "....",
          data: [.....]
       },
       {
          type: "bar",
          label: "....",
          data: [.....]
       },
   ]
}

In this case, you'll have to set the y axes ids for the two parts and, in options set display: false for the axis you don't want to show:

const data = {
   labels: [....],
   datasets: [
       {
          type: "line",
          label: "....",
          data: [.....],
          yAxisID: "y"
       },
       {
          type: "bar",
          label: "....",
          data: [.....],
          yAxisID: "y2"
       }
   ]
};

const chartOptions = {
   //....... other options
   scales:{
      x: { 
         // .... options for the x axis
      },
      y: { 
         // .... options for the y axis 
      },
      y2:{
         display: false,
         // ... other y2 options, if any
      }
   }
}

Here's a snippet with a minimal version of the code doing that:

const data = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [
        {
            label: 'lines',
            data: [100, 20, 40, 50, 90, 44, 29],
            type: 'line',
            order: 1,
            yAxisID: 'y'
        },
        {
            label: 'bars',
            data: [10009, 2000, 4000, 5000, 9000, 4400, 2900],
            type: 'bar',
            order: 0,
            yAxisID: 'y2'
        }
    ]
};

const options = {
    scales:{
        y: {
            beginAtZero: false,
            //grace: "2%"
        },
        y2: {
            display: false,
        }
    },
    layout: {
        padding: {top: 10} // to fit the label
    }
}
new Chart(document.getElementById('chart1'), {data, options});

<div style="height: 100%; width:100%">
<canvas id="chart1"  style="height: 90vh; width:95vw"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

As for fitting the label, again, we don't know how you added them. You may try:

• options.layout.padding.top docs link (see the example above),
• options.scales.y.grace docs link (commented in the example above)
• or simply increasing the maximum (max) of the y scale according to data.