How to create a graph where the vertical axis (Y-axis) is a string?

Question

The graph I want to make is a line graph with strings on the vertical axis and numbers on the horizontal axis by using Chart.js. For example, the horizontal axis is time and the vertical axis is the colour of the hat. See the image below

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21],//Number of frames
    datasets: [{
      label: 'The colour of the hat of the person in the frame',
      data: ["red","blue","red","blue","yeallow","red","blue","red","blue","yeallow",.....],
      borderColor: '#f88',
    }],
  }
});

graph image

Does this answer your question? [In Chart.js set chart title, name of x axis and y axis?](https://stackoverflow.com/questions/27910719/in-chart-js-set-chart-title-name-of-x-axis-and-y-axis) — Cypherjac, Feb 04 '22 at 12:28
@Cypherjac that does not answer the question, he wants to replace the default ticks with text instead of adding a title to the scale — LeeLenalee, Feb 04 '22 at 13:07

score 0 · Accepted Answer · answered Feb 04 '22 at 13:06

Yes, you have to set your y scale to category, also supply it a labels array and then in your data array you can mention those labels:

const options = {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6],
    datasets: [{
      label: '# of Points',
      data: ["Blue", "Red", "Red", "Orange", "Green", "Orange"],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      y: {
        type: 'category',
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
      },
    }
  }
}

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

How to create a graph where the vertical axis (Y-axis) is a string?

1 Answers1