[Chartjs]-How to hide the labels of graphs that are not toggled in ChartJS

by

1👍

Switching to a time scale will solve this issue in the easyest way because then this is the default behaviour as you can see in the example below:

const options = {
  type: 'line',
  data: {
    datasets: [{
        label: '# of Votes',
        data: [{
            x: new Date('10-16-2021'),
            y: 1
          }, {
            x: new Date('10-18-2021'),
            y: 4
          }, {
            x: new Date('10-19-2021'),
            y: 8
          },
          {
            x: new Date('10-20-2021'),
            y: 6
          }
        ],
        borderColor: 'pink',
      },
      {
        label: '# of Points',
        data: [{
            x: new Date('10-18-2021'),
            y: 3
          }, {
            x: new Date('10-19-2021'),
            y: 9
          },
          {
            x: new Date('10-20-2021'),
            y: 4
          }
        ],
        borderColor: 'orange',
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'time'
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</body>

Leave a comment