title: How to Create a Custom Logarithmic Axis in Chart.js
body: <p>I'm trying to refactor an old Flex app using Chart.js and I would like to replicate this linear/log axis. Notice the clean minimal spacing on the yAxis.</p>
  
  <p><a href="https://i.stack.imgur.com/UXoBr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UXoBr.png" alt="Notice the clean minimal spacing on the yAxis."></a></p>
  
  <p>Here is my Chart.js code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var mtbsoData = [];
          var mtbsoLables = [];
  
          for (let i = 0; i &lt;= 10; i++) {
              mtbsoData.push(i * i * i * i);
              mtbsoLables.push(i.toString());
          }
  
          var ctxMtbso = document.getElementById("chartMtbso").getContext('2d');
  
          var chartMtbso = new Chart(ctxMtbso, {
              type: 'bar',
              data: {
                  labels: mtbsoLables,
                  datasets: [{
                      label: 'label',
                      data: mtbsoData,
                      backgroundColor: 'rgba(0, 0, 255, .6)',
                      borderColor: 'rgba(0, 0, 255, 1)',
                      borderWidth: 1
                  }]
              },
              options: {
                  title: {
                      text: 'Title',
                      display: true,
                      fontSize: 24
                  },
                  scales: {
                      xAxes: [{
                          display: true,
                          ticks: {
                              beginAtZero: true
                          },
                          scaleLabel: {
                              display: true,
                              labelString: 'X Axis'
                          }
                      }],
                      yAxes: [{
                          type: 'logarithmic',
                          ticks: {
                              min: 0,
                              max: 1000,
                              callback: function (value, index, values) {
                                  return value + ' years';
                              }
                          },
                          scaleLabel: {
                              display: true,
                              labelString: 'Y Axis'
                          }
                      }]
                  },
                  tooltips: {
                      callbacks: {
                          label: function (tooltipItem, data) {
                              var label = data.datasets[tooltipItem.datasetIndex].label || '';
  
                              if (label) {
                                  label += ': ';
                              }
                              label += tooltipItem.yLabel.toFixed(2);
                              return label;
                          }
                      }
                  },
                  legend: {
                      display: false
                  }
  
              }
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"&gt;&lt;/script&gt;
  
  &lt;canvas id="chartMtbso"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a screenshot. Notice the crowded ticks on the yAxis. </p>
  
  <p><a href="https://i.stack.imgur.com/hPtEO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hPtEO.png" alt="Notice the crowded ticks on the yAxis."></a> </p>
  
  <p>It seems from the <a href="https://www.chartjs.org/docs/latest/axes/cartesian/logarithmic.html" rel="nofollow noreferrer">documentation</a> that the only ticks properties that you can apply are the "min" and "max" properties. </p>
  
  <p>Can anybody suggest a solution?</p>