Change position of Chart.js tick labels - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Change position of Chart.js tick labels

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Horizontal Bar Chart Label Position</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript" src="http://getfirebug.com/firebug-lite-debug.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script type="text/javascript">
    $(window).on('load', function() {
var chartColors = {/*from w ww . j a  va 2  s  .  c  o  m*/
  red: 'rgba(255, 99, 132,0.5)',
  orange: 'rgba(255, 159, 64,0.5)',
  green: 'rgba(75, 192, 192,0.5)',
  blue: 'rgba(54, 162, 235,0.5)'
};
var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['Blue', 'Red', 'Green', 'Orange'],
    datasets: [{
      fill: false,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
      ],
      backgroundColor: [
        chartColors.blue,
        chartColors.red,
        chartColors.green,
        chartColors.orange
      ],
    }],
  },
  options: {
    animation: {
      duration: 1,
      onComplete: function() {
        var chartInstance = this.chart;
        ctx.font = Chart.helpers.fontString(16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            var label = bar._model.label;
            var xOffset = 10;
            var yOffset = bar._model.y - 42;
            ctx.fillText(label, xOffset, yOffset);
          });
        });
      }
    },
    scales: {
      yAxes: [{
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          display: false
        }
      }],
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          display: false
        }
      }]
    },
    legend: {
      display: false
    },
    title: {
      display: false,
    }
  }
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" height="200"></canvas>  
   </body>
</html>

Related Tutorials