0
295
ViewsHow to create a graph where the vertical axis (Y-axis) is a string?
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',
}],
}
});
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question