[Chartjs]-ChartJs days of the week from numbers

by

1👍

✅

You can use the tickCallback to transform the value to whatever you like, easyest thing to do is make an array with all the weekDays and then use the value as an index like so:

const weekDays = ["Sun", "Mon", "Thu", "Wen", "Tru", "Fri", "Sat"];

const options = {
  type: 'bubble',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 0,
        y: 1,
        r: 4
      }, {
        x: 1,
        y: 1,
        r: 4
      }, {
        x: 2,
        y: 1,
        r: 4
      }, {
        x: 3,
        y: 1,
        r: 4
      }, {
        x: 4,
        y: 1,
        r: 4
      }, {
        x: 5,
        y: 1,
        r: 4
      }, {
        x: 6,
        y: 1,
        r: 4
      }],
      backgroundColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback: (val) => (weekDays[val])
        }
      }
    }
  }
};

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.5.0/chart.js"></script>
</body>

Leave a comment