Chart.js issue #3618

Tooltip label is incorrect on Bar chart when min is defined

by SAiTO TOSHiKi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<div class="container">
  <div class="chart-container">
    <canvas id="myChart1"></canvas>
  </div>
  <div class="chart-container">
    <canvas id="myChart2"></canvas>
  </div>
  <div class="chart-container">
    <canvas id="myChart3"></canvas>
  </div>
  <div class="chart-container">
    <canvas id="myChart4"></canvas>
  </div>
</div>

<script>
  window.chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(231,233,237)'
  };

</script>

CSS

.chart-container {
  width: 500px;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 40px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

JavaScript

// report for chart.js v2.4.0

//---------
var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My Second dataset",
    backgroundColor: window.chartColors.red,
    borderColor: window.chartColors.red,
    data: [10, 20, 30, 40, 50, 60, 70]
  }, {
    label: "My First dataset",
    backgroundColor: window.chartColors.orange,
    borderColor: window.chartColors.orange,
    data: [15, 25, 35, 45, 55, 65, 75]
  }]
};

var dataNonNumericY = {
  xLabels: ["January", "February", "March", "April", "May", "June", "July"],
  yLabels: ['', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
  datasets: [{
    label: "My First dataset",
    data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved'],
    fill: false,
    borderColor: window.chartColors.red,
    backgroundColor: window.chartColors.red
  }]
};

//--------- 
// non min option
//--------- 
var ctx1 = document.getElementById("myChart1");
var config1 = {
  type: "bar",
  data: data,
  options: {
    title: {
      display: true,
      text: "Bar with no min option"
    },
    scales: {
      xAxes: [{
        //categoryPercentage: 1,
        //barPercentage: 1,
      }]
    }
  }
};
var myLineChart1 = new Chart(ctx1, config1);

//--------- 
// wrong category size of Bar with min option.
//--------- 
var ctx2 = document.getElementById("myChart2");
var config2 = {
  type: "bar",
  data: data,
  options: {
    title: {
      display: true,
      text: "Bar with min option."
    },
    scales: {
      xAxes: [{
        ticks: {
          min: "March",
        },
        //categoryPercentage: 1,
        //barPercentage: 1,
      }]
    }
  }
};
var myLineChart2 = new Chart(ctx2, config2);

//--------- 
// line non numeric y-axis
//--------- 
var ctx3 = document.getElementById("myChart3");
var config3 = {
  type: "line",
  data: dataNonNumericY,
  options:...