I’m trying to limit the amount of X ticks displayed on the ChartJS config, but it keeps ignoring the setup.
const data = {
labels: ['', '', ''],
datasets: [{
label: '偽のラスパイ MQTT',
data: ['', '', ''],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
const config = {
type: 'line',
data,
options: {
scales: {
xAxis: {
ticks: {
maxTicksLimit: 1
}
}
}
}
};
const myChart = new Chart(document.getElementById('myChart'), config);
Although I checked other posts, it seems to be some minor differences in the property name and property depth for the maxTicksLimit
Maybe the property name is incorrect?
Advertisement
Answer
This is because you are using V2 of chart.js while using V3 syntax. For V2 all x axes scales are in an array calles xAxes and not their own object.
For the full docs you can see them here
Live example:
const data = {
labels: ['', '', '', '', '', ''],
datasets: [{
label: '偽のラスパイ MQTT',
data: ['', '', '', '', '', ''],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
const config = {
type: 'line',
data,
options: {
scales: {
xAxes: [{
ticks: {
maxTicksLimit: 1
}
}]
}
}
};
const myChart = new Chart(
document.getElementById('chartJSContainer'), config);<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> </body>