Charts JS With negative Value

Modification of chartjs api to display negative value down from 0

by omarrida

HTML

<script src="http://gnomebusters.fr/jsfiddle/negative/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>

<canvas id="myBarChart" width="400" height="200" style="padding-left:10px; padding-right:10px;"></canvas>

JavaScript

var ctx = document.getElementById("myBarChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["< 18", "18-25", "26-35", "36-44", "45+"],
    datasets: [{
      label: 'Male',
      data: [17, 29, 10, 2, 3],
      backgroundColor: [
        'rgba(76, 4, 77,.6)',
        'rgba(76, 4, 77,.6)',
        'rgba(76, 4, 77,.6)',
        'rgba(76, 4, 77,.6)',
        'rgba(76, 4, 77,.6)',
      ],

      borderWidth: 1
    }, {
      label: 'Female',
      data: [-9, -21, -7, -2, -1],
      backgroundColor: [
        'rgba(76, 4, 77,.4)',
        'rgba(76, 4, 77,.4)',
        'rgba(76, 4, 77,.4)',
        'rgba(76, 4, 77,.4)',
        'rgba(76, 4, 77,.4)',

      ],
      borderWidth: 1
    }]
  },
  options: {

    title: {
      display: true,
      padding: 20,
      text: 'Age and Gender Breakdown'
    },

    legend: {
      labels: {
        fontSize: 12
      },
      display: true,
      position: 'bottom',
    },

    scales: {

      xAxes: [{
        categoryPercentage: .5,
        barPercentage: 1,
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          maxRotation: 0,
          minRotation: 0
        },
        stacked: true,
        position: 'bottom',
      }],
      yAxes: [{
        gridLines: {
          display: false,
          drawBorder: false
        },

        ticks: {
          callback: function(label, index, labels) {
            return Math.abs(label) + '%';
          },
          maxTicksLimit: 5
        },
      }]
    }
  }
});