HOw to create a PrimeNg horizontal bar chart from right to left

Viewed 334

I'm trying to create a horizontal bar chart using PrimeNg which renders chart left to right by default. Is there any way to make the chart renders from right to left??

My Options for the chart is

options = {
    tooltips: {
      callbacks: {
        label(tooltipItem, data) {
          const tooltipValue =
            data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          return parseInt(tooltipValue, 10).toLocaleString();
        },
      },
    },
    layout: {
      padding: {
        left: 100,
      },
    },
    legend: {
      display: false,
      position: 'top',
      onClick: (e) => e.stopPropagation(),
      labels: {
        fontColor: '#777777',
      },
    },
    scales: {
      xAxes: [
        {
          display: false,
          stacked: false,
          gridLines: {
            display: false,
          },
          ticks: {
            beginAtZero: false,
          },
        },
      ],
      yAxes: [
        {
          display: true,
          barThickness: '22',
          stacked: true,
          scaleLabel: {
            display: false,
          },
          gridLines: {
            display: false,
          },
        },
      ],
    },
    plugins: {
      limitCenterText: false,
      datalabels: {
        display: true,
        anchor: 'end',
        align: 'end',
        formatter(value) {
          return parseInt(value, 10).toLocaleString();
        },
        color: '#777777',
        font: {
          weight: 500,
          family: 'Roboto',
          size: 12,
        },
      },
    },
  };

The Stackblitz url for this is https://stackblitz.com/edit/primeng-chart-sanbox-d5ztmv?file=src%2Fapp%2Fapp.component.ts

Is there any way to achieve this??

0 Answers
Related