Chartjs-How to make a chart with a string values instead of data?

by

2👍

✅

you can use the ticks callback to customize the labels.

here, I associate each value with a letter.

A = 4
B = 3
C = 2
D = 1

then replace the value with the letter in the callback…

  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        callback: function(value) {
          var axisLabels = 'DCBA';

          // do not include ticks with decimal places
          if ((value > 0) && (value.toFixed(0)) === value.toString()) {
            return axisLabels.charAt(value - 1);
          }
          return null;
        }
      }
    }]
  }

see following working snippet…

$(document).ready(function() {
  var ctx = document.getElementById('bar-chart');
  var data = {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
      label: 'Series',
      data: [4, 3, 2, 1],
      backgroundColor: "rgba(54, 162, 235, 1)",
      borderColor: "rgba(54, 162, 235, 0.6)"
    }]
  }
  var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            callback: function(value) {
              var axisLabels = 'DCBA';

              // do not include ticks with decimal places
              if ((value > 0) && (value.toFixed(0)) === value.toString()) {
                return axisLabels.charAt(value - 1);
              }
              return null;
            }
          }
        }]
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="bar-chart"></canvas>

EDIT

you can use the following options,
to ensure ticks are drawn for all values in the map…

suggestedMin: 1,
suggestedMax: 8,

see following working snippet…

$(document).ready(function() {
  var ctx = document.getElementById('bar-chart');
  var data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'],
    datasets: [{
      label: 'Series',
      data: [6, 6, 6, 6, 6, 6, 6, 1, 1, 1],
      backgroundColor: 'pink'
    }]
  }

  const yLabels = {
    1: 'TD/NP',
    2: 'G',
    3: 'F',
    4: 'E',
    5: 'D',
    6: 'C',
    7: 'B',
    8: 'A',
  }

  var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
      responsive: true,
      legend: {
        display: false
      },
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
              suggestedMin: 1,
              suggestedMax: 8,
              stepSize: 1,
              callback: function(value, index, values) {
                return yLabels[value];
              }
            }
          }
        ]
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="bar-chart"></canvas>

Leave a comment