Is there anyway I can customize the X-axis label to words instead of numbers scale? I tried inserting the labels attribute in my data, but it doesn't work.

this is my code:

var bubbleChartData = 
    {

        datasets: [
        {
            label: "My First dataset",
            backgroundColor: randomColor(),
            data: [4, 2, 3, 4, 5]
        }],
        labels: [
            "Bad",
            "Average",
            "Good",
            "Very Good",
            "Perfect"
        ]   
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myChart = new Chart(ctx, {
            type: 'bubble',
            data: bubbleChartData,
            xAxisID: 'testing',
            options: {

                responsive: true,
                title:{
                    display: true,
                    text:'Chart.js Bubble Chart'
                },


            }
        });
    };

this is what i got:

Is there anyway I can customize the X-axis label to words instead of numbers scale? I tried inserting the labels attribute in my data, but it doesn't work.

this is my code:

var bubbleChartData = 
    {

        datasets: [
        {
            label: "My First dataset",
            backgroundColor: randomColor(),
            data: [4, 2, 3, 4, 5]
        }],
        labels: [
            "Bad",
            "Average",
            "Good",
            "Very Good",
            "Perfect"
        ]   
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myChart = new Chart(ctx, {
            type: 'bubble',
            data: bubbleChartData,
            xAxisID: 'testing',
            options: {

                responsive: true,
                title:{
                    display: true,
                    text:'Chart.js Bubble Chart'
                },


            }
        });
    };

this is what i got:

• javascript
• angularjs
• charts
• chart.js

• My experience is to change the Y-Axis , append some format on the numbers and i used the scaleLabel callback option. see the documentation, place the code above, before appending / generating the chart. – Francis Saul Commented Jun 13, 2016 at 4:56

1 Answer 1

Use a callback for xAxes into your options:

options: {
  responsive: true,
  title:{
      display: true,
      text:'Chart.js Bubble Chart'
  },    
  scales: {
    xAxes: [{
      ticks: {
        callback: function(value, index, values) {
          return 'value is ' + value;
        }
      }
    }]
  }
}