title: Chart.js x-axis label mirroring on a vertical bar chart
body: <p>Chart.js does not support the &quot;mirror&quot; option on vertical &quot;bar&quot; chart.
  I tried to search for a workaround but i did not find any help on internet.</p>
  <p>I wrote a workaround solution but there's only one thing to solve to be a perfect mirroring:</p>
  <ul>
  <li>align text at the bottom axis.</li>
  </ul>
  <p><a href="https://i.stack.imgur.com/eSkZk.png" rel="nofollow noreferrer">Actual text alignment</a></p>
  <p>Somebody can help me to fix this?</p>
  <pre class="lang-js prettyprint-override"><code>var ctx = document.getElementById(&quot;myChart&quot;).getContext(&quot;2d&quot;);
  var myChart = new Chart(ctx, {
    type: &quot;bar&quot;,
    data: {
      labels: [&quot;ONE&quot;, &quot;TWO&quot;, &quot;THREE&quot;, &quot;FOUR&quot;, &quot;FIVE&quot;, &quot;SIX&quot;, &quot;SEVEN&quot;, &quot;EIGHT&quot;],
      datasets: [{
        label: &quot;Quota mensile&quot;,
        backgroundColor: [
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;
        ],
        borderColor: [
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;,
          &quot;rgba(255, 255, 153, 1)&quot;
        ],
        borderWidth: 1,
        data: [10, 11, 18, 10, 13, 28, 12, 16]
      }]
    },
    options: {
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          ticks: {
            maxRotation: 90,
            minRotation: 90,
            display: &quot;top&quot;
          },
        }],
        yAxes: [{
          display: false
        }]
      },
      tooltips: {
        enabled: true
      },
      maintainAspectRatio: true,
      responsive: true
    }
  });
  
  Chart.plugins.register({
    /* Adjust axis labelling font size according to chart size */
    id: &quot;responsiveXlabels&quot;,
    beforeDraw: function(c) {
      var chartHeight = c.chart.height;
      var size = (chartHeight * 2.5) / 100;
      var xAxis = c.scales[&quot;x-axis-0&quot;];
      xAxis.options.ticks.minor.fontSize = size;
      xAxis.height = 10;
      xAxis.minSize.height = 10;
      c.options.scales.xAxes[0].ticks.padding = -size * 4.5;
      xAxis.margins.bottom = size * 12.5;
    },
    afterDraw: function(c) {
      c.options.scales.xAxes[0].ticks.padding = -158;
    }
  });
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;canvas id=&quot;myChart&quot; width=&quot;800&quot; height=&quot;600&quot;&gt;&lt;/canvas&gt;
  </code></pre>
  <p>the responsiveXlabel plugin is used to transform text on resize.</p>
  <p>Hope this helps who wants to implement mirroring on X Axis and satisfy responsive request.</p>
  <p>Fiddle link to my solution: <a href="https://jsfiddle.net/un8f7kmc/5/" rel="nofollow noreferrer">Fiddle link</a></p>
  <p>I used a chart.js 2.8.0 modified version that you can find at <a href="https://codepen.io/kurkle/pen/ZVQBLQ?editors=1111" rel="nofollow noreferrer">this link</a>
  A CodePEN BY Jukka Kurkela</p>