How to align horizontal bars to the right

Question

I'm using react-chartjs-2.

<HorizontalBar
                    options={{
                        legend: {
                            display: false,
                        },
                        tooltips: {
                            enabled: false,
                        },
                        hover: {
                            mode: null,
                        },
                        scales: {
                            xAxes: [
                                {
                                    display: false,
                                    gridLines: {
                                        color: "rgba(0, 0, 0, 0)",
                                    },
                                    position: 'right'
                                },
                            ],
                            yAxes: [
                                {
                                    position: "right",
                                    ticks: {
                                        reverse: true,
                                    },
                                    gridLines: {
                                        color: "rgba(0, 0, 0, 0)",
                                    },
                                },
                            ],
                        },
                        plugins: {
                            tooltip: {
                                enabled: false,
                            },
                        },
                    }}
                    data={{
                        datasets: [
                            {
                                label: "My First dataset 2",
                                borderWidth: 0,
                                backgroundColor: [
                                    "#68B68A",
                                    "#5B9FC9",
                                    "#83C39F",
                                    "#85B7D6",
                                    "#9FD1B4",
                                    "#C2DAEB",
                                ],
                                data: ...,
                                barPercentage: 0.5,
                            },
                        ],
                    }}
                />

I need to align horizontal bars to the right side like this

but actual result from my code is this

LeeLenalee · Answer 1 · 2022-06-13T14:36:29.173

You could use floating bars for this:

const options = {
  type: 'horizontalBar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [
        [
          20,
          12
        ],
        [
          20,
          19
        ],
        [
          20,
          3
        ],
        [
          20,
          5
        ],
        [
          20,
          2
        ],
        [
          20,
          14
        ]
      ],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

You put the maximum value of your axis as the first or last (chart.js will render it the same) in your array. Then for the other value you enter the start point. So that would be max value - the percentage

How to align horizontal bars to the right

1 Answers1