title: Horizontal BarChart with labels and additional text
body: <p>I would like to create a horizontal BarChart.
  The data range is from 0 to 20 or from 0 to -20.
  The labels of the data should always be on the opposite side of the bar.
  I also need additional text on the left and right.</p>
  <p>The picture should make it clear:
  <a href="https://i.stack.imgur.com/VLTdv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VLTdv.jpg" alt="enter image description here" /></a>
  I would like to do it with Chart.js.</p>
  <h2>edit:</h2>
  <p>This is my approach with Chart.js:</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 ctx = document.getElementById("myChart");
  var chartStatus = Chart.getChart("myChart");
  if (chartStatus != undefined) {
    chartStatus.destroy();
  }
  var myChart = new Chart(ctx, {
    type: "bar",
  
    data: {
      labels: ["Cats", "Dogs", "Dugs", "Mice", "Hamster", "Tiger"],
      datasets: [
        {
          label: false,
          data: [-9, 1, 9, -9, 1, 9],
          // data: [12, 19, -3],
          backgroundColor: [
            "rgba(39, 152, 228, 0.7)",
            "rgba(233, 85, 59, 0.7)",
            "rgba(152, 140, 202, 0.7)",
            "rgba(39, 152, 228, 0.7)",
            "rgba(233, 85, 59, 0.7)",
            "rgba(152, 140, 202, 0.7)"
          ],
          borderColor: [
            "rgba(39, 152, 228,1)",
            "rgba(233, 85, 59, 1)",
            "rgba(152, 140, 202, 1)",
            "rgba(39, 152, 228,1)",
            "rgba(233, 85, 59, 1)",
            "rgba(152, 140, 202, 1)"
          ],
          borderWidth: 6
        }
      ]
    },
    options: {
      responsive: true,
      indexAxis: "y",
      plugins: {
        gridLines: {
          display: false
        },
        title: {
          display: true,
          text: "Pets",
          font: {
            size: 22
          }
        },
        legend: {
          display: false
        },
        tooltip: {
          enabled: false
        }
      },
  
      scales: {
        x: {
          min: -20,
          max: 20,
          gridLines: {
            display: false
          },
          ticks: {
            color: "#d6d6d9",
            font: {
              size: 22
            }
          }
        },
        y: {
          labels: ["Text1", "Text2", "Text3", "Text4", "Text5", "Text6"],
          gridLines: {
            display: false
          },
          barPercentage: 1,
          gridLines: {
            display: false
          },
          ticks: {
            color: "#d6d6d9",
            font: {
              size: 22
            }
          }
        },
        gridLines: {
          display: false
        },
        secondY: {
          labels: ["Text7", "Text8", "Text9", "Text10", "Text11", "Text12"],
          position: "right",
  
          ticks: {
            color: "#d6d6d9",
            font: {
              size: 22
            }
          }
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"&gt;&lt;/script&gt;
  &lt;canvas id="myChart"&gt;&lt;/canvas&gt;
  &lt;img style="display:none" id="url" /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I could solve the different text for the left and the right side with the <code>labels</code> on the respective axes.</p>
  <p>But how do I get the labels (cat, dog etc) into the graph so that they are always on the opposite side of the bars?</p>