Chart.js with dual axis incorrect starting points (if negative values)

问题

I have a chart.js chart in my app. This is how it looks without negative values:

With negative values:

As you can see I have dual axisY. They work as needed if there are no negative values. But if there are some, right AxisY starts in the incorrect position. How to make it starts in the same place as left AxisY?

Here is my code:

private  buildOptions(): any {
    return {
        responsive: true,
        title: {
            display: false,
            text: ''
        },
        tooltips: {
            mode: 'index',
            intersect: true
        },
        scales: {
            yAxes: [{
                position: "left",
                id: "y-axis-0",
                fontColor: '#fff'
            }, {
                position: "right",
                id: "y-axis-1",
                fontColor: '#fff'
            }]
        },
        legend: {
            display: true,
            labels: {
                fontColor: '#fff'
            }
        }
    };
}

Thank you.

回答1:

Have you tried setting the same min value for both axes?

You can use ticks for specifying it:

ticks: {
          min: -5
        }

Here's an example snippet I made for you:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, -5, 3, 5, 2, -3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        position: "left",
        id: "y-axis-0",
        fontColor: '#fff',
        ticks: {
          min: -5
        }
      }, {
        position: "right",
        id: "y-axis-1",
        fontColor: '#fff',
        ticks: {
          min: -5
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>

来源：https://stackoverflow.com/questions/46551434/chart-js-with-dual-axis-incorrect-starting-points-if-negative-values

标签

javascript

charts

chart.js