I'm trying hide the labels along the axis in the following Radial chart:
This is part of a VueJS application using vue-chartjs
(which as of time of writing doesn't support version 3 of chart.js
and therefore the latest documentation is not applicable)
Versions:
"vue-chartjs": "^3.5.1"
"chart.js": "^2.9.4"
I have tried variations offered in the following thread with no joy (but they are mostly for latest version of chart.js
: Hide labels on x-axis ChartJS
This makes it disappear but the other labels (Mean Error, Loss Loss etc) also disappear:
scale: {
display: false
}
Point Labels looked promising from documentation, but doesn't seem to have an effect (maybe I've missed a nesting):
pointLabels: { //should this be nested in another parent in the config?
display: false
}
What is the correct configuration to just make the numbers along the tick marks disappear only?
You will have to put the display false in the tick
sub config in the scale
config like so:
var options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scale: {
ticks: {
display: false
}
}
}
}
var 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/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>