0
180
VisualizaçõesHow can I remove specific ticks and rearrange the chart? Please the attached image
I am new to ChartJS and trying to tweak the chart. I have removed specific y-axis ticks using callback function but getting space between the remaining ticks but I want to rearrange the chart with same width between ticks.
Here is the sample fiddle which I tried.
Can someone help me?
var data = [{
x: 0,
y: 10
}, {
x: 2,
y: 10
}, {
x: 6,
y: 10
}, {
x: 10,
y: 50
}];
var labels_x = [1.6666666666666665, 9.666666666666666, 17.666666666666668, 25.666666666666668, 33.666666666666664, 41.666666666666664, 49.666666666666664, 57.666666666666664] // note computed values not integer
var labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon']
var options = {
type: 'line',
data: {
datasets: [{
data: data
}, ]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
callback(value, index) {
if (value != 20 && value != 25) {
return value;
}
console.log("val::::::::", value)
}
}
}],
xAxes: [{
type: 'linear',
ticks: {
min: 0,
max: 61,
autoSkip: false,
callback(value, index) {
return labels[index];
}
},
afterBuildTicks(scale) {
return labels_x;
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);canvas {
background-color: #eee;
}<body>
<canvas id="chartJSContainer" width="600" height="300"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
·
Juan Pablo Isaza
Responde à pergunta