CODEWITHSUNDEEP
javascripthtmlreactjschart.jsreact-chartjs-2
intrepiddrain
intrepiddrain

Reputation: 21

Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?

I'm trying to duplicate the X axis ticks on both sides of the chart (Bottom and Top).

I have seen older questions of this asked but this was during chartjs 2.x -- They have changed the scale section of the options since then. You used to be able to do something similar to this:

xAxes: [
      {
        position: 'top',
      },
      {
        position: 'bottom',
      }
    ]

But in Chartjs 3.x you can't supply an array for xAxes. You need to now add an ID to your dataset then in the scale options reference that ID. But I can't reference 1 dataset in 2 scale objects when one says position: top and the other position: bottom. It will only use the last scale object.

So my question is, with ONE dataset. How can I have it so the X axis is on the bottom of the chart AND the top of a horizontal bar chart? That way in case the chart is big I don't have to always scroll down to see what the value is.

Edit: Based on feedback I now have the following result, which is closer to what I'm looking for, but what's going on with the ticks on the top. Why aren't they matching the numbers on the bottom?

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{    
      data: [1, 3, 6, 2, 8, 9],
      borderColor: '#00D',
    }]
  },
  options: {
    indexAxis: "y",
    scales: {
      x: {
      },
      x1: {
        position: 'top'
      }
    }
  }
});
canvas {
  max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

Upvotes: 2

Views: 1737

Answers (2)

uminder
uminder

Reputation: 26150

In case you want to produce a horizontal bar chart, you could define the x-axes as follows:

scales: {
  x: {
    min: 0
  },
  x1: {
    position: 'top',
    min: 0,
    max: 9
  }
}

Please take a look at the runnable sample below and see how it works when the data is dynamic:

var data = [3, 6, 8, 9, 31];

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
      data: data,
      borderColor: '#00D',
    }]
  },
  options: {
    indexAxis: 'y',
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        min: 0
      },
      x1: {
        position: 'top',
        min: 0,
        suggestedMax: Math.max(...data)
      }
    }
  }
});
canvas {
  max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

Upvotes: 0

uminder
uminder

Reputation: 26150

In case you want the see the same ticks at the top of the chart, simply define a second x-axis as follows:

x1: {
  position: 'top'
}

Please take a look at below runnable code and see how it works:

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{    
      data: [1, 3, 6, 2, 8, 9],
      borderColor: '#00D',
    }]
  },
  options: {
    scales: {
      x: {
      },
      x1: {
        position: 'top'
      }
    }
  }
});
canvas {
  max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

Upvotes: 1

Related Questions