Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

133
Vistas
Limit chart.js X axis ticks

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?

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.