0
232
ViewsHide all scale labels in chartjs
I have a graph that looked pretty decent.
It only showed one line, one dataset, and no label/y axis.
it was configured like this
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: {
display: false
},
x: {
display: false
}
}
}
but then I decided to add another dataset with a different scale. So now my config looks like this:
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: [
{
id: 'viewTime',
display: false
},
{
id: 'diff',
display: false
}
],
x: {
display: false
}
}
}
And the issue is that is is in fact displaying both the viewTime and the diff scale.
Am I missing something or how do I hide all scales?
·
Juan Pablo Isaza
1 answers
Answer question0
The scales are not array's anymore. In v3 every scale is its own object where the key is the scale ID so you will get this:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
yAxisID: 'y2'
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: {
display: false
},
y2: {
display: false
},
x: {
display: false
}
}
}
}
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>
</body>
·
Juan Pablo Isaza
Report
Answer question