[Chartjs]-Horizontal bar with two yaxes chart js

by

2👍

✅

In the snippet below I’ve set the options labels, type, offset on the y-axes to achieve the result you want. I’ve also removed unnecessary properties.

var canvas = document.getElementById('myChart');
var extremo = [-5, 3, 9, -11];
var data = {
  datasets: [{
    backgroundColor: 'rgba(63, 191, 191, 0.75)',
    borderColor: 'rgba(63, 191, 191, 0.75)',
    hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
    hoverBorderColor: 'rgba(191, 63, 63, 1)',
    data: extremo
  }]
};

var option = {
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    xAxes: [{
      ticks: {
        maxTicksLimit: 12
      }
    }],
    yAxes: [{
        labels: ['Verbal', 'Global', 'Reflexivo', 'Sensitivo']
      },
      {
        position: 'right',
        labels: ['Visual', 'Secuencial', 'Activo', 'Intuitivo'],
        gridLines: {
          display: false
        },
        type: 'category',
        offset: true
      }
    ]
  },
  legend: {
    display: false
  }
};

var myLineChart = new Chart(canvas, {
  type: 'horizontalBar',
  data: data,
  options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart">

Leave a comment