[Chartjs]-How can i modify scale labels in angular chart js?

by

1👍

✅

in order to put your own labels in the ‘y’ axis you have to use the tick options, scale label will only modify the label of the axis of the whole, so let’s say you want to add a label for your y axis, like 3000$ instead of only 3000.

you need to use this.

 ticks: {
                    callback: function(value, index, values) {
 //your function here
     }
}

in this example i wanted to return 3 states for each value, like a ticket system.

    $scope.options = {
   scales: {
            yAxes: [{
      scaleLabel:  {
        display: true,
        labelString: 'Estado'
      },
      ticks: {
                    min: 1,
                    max: 3,
                    stepSize: 1,
                    callback: function(value, index, values) {

                    if(value == 1){
var dasLabel='Ticket open';                             
                    }
                    if(value == 2){
var dasLabel='Attending ticket';                            
                    }
                    if(value == 3){
var dasLabel='issued resolved';                             
                    }       

                        return dasLabel;
                    }
                }
            }]  ,
            xAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Hora'
      }
            }]
        }
  };

and your markup

<canvas id="line" class="chart chart-line" chart-data="axis"
chart-labels="myLabels" chart-series="series"  chart-options="options"
</canvas>

Leave a comment