Make a Horizontal Bar Chart with ChartJS – onlinecode

onlinecode

2 years ago

Make a Horizontal Bar Chart with ChartJS – onlinecode

In this post, we will give you information about Make a Horizontal Bar Chart with ChartJS. Here we will give you detail about Make a Horizontal Bar Chart with ChartJS And how to use it also give you a demo for it if it is necessary.

Making a bar chart horizontal in ChartJS is easy. However, you need to do things a little differently in ChartJS 2 vs ChartJS 3+.

ChartJS 3+ for Make a Horizontal Bar Chart with ChartJS

In ChartJS 3+, you should set the indexAxis: 'y' option as follows.

const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Easy as',
      data: [1, 2, 3],
    }],
  },
  options: {
    indexAxis: 'y', // <-- here
    responsive: true
  }
});

ChartJS 2 for Make a Horizontal Bar Chart with ChartJS

In ChartJS 2, just set the chart’s type to 'horizontalBar' instead of 'bar' as follows.

const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'horizontalBar', // <-- instead of 'bar'
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Easy as',
      data: [1, 2, 3],
    }],
  },
  options: {
    responsive: true
  }
});

Chart.js is a free, open-source JavaScript library for creating interactive charts. It is used by millions of developers worldwide to create beautiful and informative charts for their websites and applications.

Chart.js is easy to use and has a wide range of features, including:

Support for eight chart types: bar, line, area, pie, bubble, radar, polar, and scatter
Highly customizable options for colors, fonts, and styles
Ability to add annotations, tooltips, and other interactive elements
Support for zooming and panning
Integration with popular frameworks like React and Angular

Chart.js is a powerful tool that can be used to create a wide variety of charts. It is a great choice for developers who want to create beautiful and informative charts for their websites and applications.

Here are some of the benefits of using Chart.js:

It is free and open-source.
It is easy to use.
It has a wide range of features.
It is highly customizable.
It is well-documented.
It is actively maintained.
It has a large community of users and developers.