Chart.js ignores configurations

Question

Chart.js ignores configurations

Navigation

#1 by (0 votes)

0

I have the following code

    var ctx = document.getElementById('myChart').getContext("2d");
    var chart = new Chart(ctx, {

      type: 'horizontalBar',

      data: {
        labels:['uno','dos','tres','cuatro','cinco','seis','siete','ocho','nueve','diez'],
        datasets: [{
            label: "Resultado",
            backgroundColor: 'lightblue',
            data: [3, 6, 4, 4, 3, 6, 5, 4, 6, 2],
          },
          {
            label: "Perfil",
            backgroundColor: "lightpink",
            data: [2, 3, 4, 6, 7, 5, 4, 3, 8, 2]
          }

        ]
      },
      options: {
        scales: {
          xAxes: [{
            autoSkip: false,

            ticks: {
              suggestedMin: 0,
              suggestedMax: 11,
              autoSkip: false

            }
          }]
        }
      }

    });

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

But there are errors with what happened in options:

suggestedMin: 0 : This only works if I delete suggestedMax: 11,

suggestedMax: 11 : this only works if I delete suggestedMin: 0

autoSkip:false : This only works when one of the previous two is not.

How can I solve it?

javascript chart.js

asked by Emiliano Pamont 27.09.2018 в 01:57

source

1 answer

How to work with classes, services and pages with Ionic3 and Angular4 How do I write in a file / file at the beginning?

score 0 · Answer 1

According to my experience it is because suggestedMin and suggestedMax go in ticks of yAxes. Since that is where you are delimiting. This is how I use it.

    scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Producto'
                    },
                    ticks: {
                        fontSize: 10,
                        autoSkip: false,
                        beginAtZero: false
                    }

                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Cantidad'
                    },
                    ticks: {
                        beginAtZero: false,
                        suggestedMax: 10,
                        stepSize: 0,
                        scaleSteps: 10,
                        autoSkip: true,
                        maxTicksLimit: 20,
                    }
                }]
            }