ChartJS: two axes in horizontalBar chart

3
votes

Using a standard bar chart I am able to successfully create a chart with two datasets plotted on two y-axis. Working Example here: https://jsfiddle.net/pe8kxjqc/12/ How can I create the same chart as a horizontalBar chart with the labels on the left and the two dataset axes on the top and bottom?

The horizontalBar chart doesn't appear to handle the second axis as expected. I've tried the following but it doesn't work like expected:

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

var options = {scales:{
xAxes:[
   {position:"top",id:"v", gridLines:{color:"rgba(53,81,103,.4)"}},
   {position:"bottom",id:"c", gridLines:{color:"rgba(255,153,0,.4)"}}
]}};

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

2 Answers

0
votes

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
votes

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