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

user_496136 0
Viewed 5078

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.

enter image description here

Any thoughts or hints on this?

chart.js primeng angular
3 Answers

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.

user_75022600

Try this to set Y axis label

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

}

user_58368590

you can try something like:

@Component({
  selector: 'chart-doughnut',
  template: `<p-chart type="bar" [data]="data" [options]="chartOptions"></p-chart> `
})
export class DoughnutChartComponent implements OnInit {

  data: any;
    public chartOptions = {
  scales: {
    yAxes: [{
      ticks: {
        stepSize: 10,
        beginAtZero: true
      }
    }]
  }
}
    constructor() {
        this.data = {
            labels: ['January', 'February', 'March'],
            datasets: [
                {  
         "label":"% Cases/Status",
         "data":[  
            20, 30, 50
         ],
         "fill":false,
         "backgroundColor":[  
            "#FF0000",
            "#FFFF02",
            "#008000",
         ],
         "borderWidth":1
      }
         ],
        }
    }

  ngOnInit() {
  }

}

check DEMO

user_89903670
Related