[Chartjs]-Negative bar chart of highcharts in chartjs

by

4👍

✅

You could use a horizontal stacked barchart with two datasets. Add negative values to the dataset on the left (male) but display the absolute value in the callbacks of the xAxis and the tooltip.

var ctx = document.getElementById('myChart').getContext('2d');
var data = {
  labels: ["20-30", "10-20", "0-10"],
  datasets: [{
      label: "Male",
      backgroundColor: "rgba(54, 162, 235, 0.2)",
      borderColor: "rgb(54, 162, 235)",
      borderWidth: 2,
      data: [-65, -59, -20],
    }, {
      label: "Female",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      data: [72, 45, 18],
    },

  ]
};

var myBarChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: data,
  options: {
    scales: {
      yAxes: [{
        stacked: true
      }],
      xAxes: [{
      	ticks: {
         	callback: function(value, index, values) {
          	return Math.abs(value);
          }
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItems, data) {
        	return data.datasets[tooltipItems.datasetIndex].label  + ": " +  Math.abs(tooltipItems.xLabel);
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment