PrimeNg bar chart how to show a label for the y-axis

Question

I have a requirement to show a vertical string as the yAxis for my bar chart.

I also need to squeeze by bars together and set a specific width for the bars.

I have added a screen shot of my mockups.

Any thoughts or hints on this?

Answer 1

Try this to set Y axis label

basicOptions: any = {
scales: {
  yAxes: [
    {
      scaleLabel: {
        display: true,
        labelString: '% Cases/Status',
        fontColor: '#757575',
        fontSize: 12
      }
    }
  ]
}

}

Answer 2

Since primeNg just implements the Chart.JS library, you can use your normal chartjs options, so to add for instance percentage signs to each step of the Y axos, you can do :

chartOptions = {
    scales: {
      yAxes: [
        {
          ticks: {
            callback: (label, index, labels) => {
              return label + '%';
            }
          }
        }
      ]
    }
  }

Then pass that class variable as options to the primeng chart component like this : <p-chart type="bar" [options]="chartOptions" [data]="data"></p-chart>.

Thus anything else you wanna add, you can read chartjs documentation/ chartjs related questions since they will apply to primeng.