[Chartjs]-Chart.js 3.7.1 remove the scale on the left with values

by

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.

Leave a comment