[Chartjs]-ChartJS: two axes in horizontalBar chart

by

0👍

You can have dynamic configuration for bar as well as horizontalBar you can use this configurations

Fiddle demo

var data = {
  labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
  datasets: [{
    "label": "Total V",
    "yAxisID": "A",
    "backgroundColor": "rgba(53,81,103,1)",
    "borderColor": "rgba(53,81,103,.4)",
    "data": [100, 90, 80, 70, 60]
  }, {
    "label": "Total C",
    "yAxisID": "A",
    "backgroundColor": "rgba(255,153,0,1)",
    "borderColor": "rgba(255,153,0,.4)",
    "data": [10, 9, 8, 7, 6]
  }]
};

var options = {
  scales: {
    yAxes: [{
      id: 'A',
      position: 'left'
    }]
  }
};

var ctx = document.getElementById("myChart");
new Chart(ctx, {
  type: "horizontalBar",
  data: data,
  options: options
});

coming to your question the actual problem is with var options={...} it is made to work only with bar charts. Hope you understand

Update

Replace following as option in the chart above for required axis scales

var options = {scales:{yAxes:[{id: 'A',position: 'left',gridLines:{color:"rgba(53,81,103,.4)"}},{position:"top",id:"c", gridLines:{color:"rgba(255,153,0,.4)"},ticks: { min: 0,max: 100,}},]}};

updated fiddle

0👍

Basically you will need a y-axis for the first dataset which going to hold the labels. And you will need two x-axis for showing the values in the top and in the bottom.

The second dataset will go to the x-axis which is shown at the top.

Working fiddle included:

{
  scales: {
    yAxes: [{
      id: 'A',
      position: 'left',
      display: true,
      gridLines: {
        color: "rgba(53,81,103,.4)"
      }
    }, ],
    xAxes: [{
      barPercentage: 0.4,
      display: true,
      id: "1",
      position: 'bottom',
      ticks: {
        fontColor: 'rgb(0, 0, 0)'
      },
      fontSize: 500,
    }, {
      stacked: false,
      barPercentage: 1,
      display: true,
      type: 'linear',
      id: '2',
      position: 'top',
      ticks: {
        fontColor: 'rgb(0, 0, 0)'
      },
      fontSize: 500,
    }],
  }
};

fiddle for two axis horizontal bar chart

Leave a comment