Bar.js is a JavaScript library that creates HTML-based bar charts. The library supports a wide range of use cases, including negative values, vertical and horizontal plots, as well as multi-axis data.

create bar graph in html code example, javascript bar chart, bar chart js, create a bar graph with html5 canvas and javascript, bar chart html css javascript

Pure CSS Making A Flexbox Bar Graphs Plugin

How to make use of it:

1. Import the CSS bar.css file in the header, and the JS bar.js file for the document.

<link rel="stylesheet" href="bar.css">
<script src="bar.js"></script>

2. Create a container to hold your bar chart.

<div id="chart"></div>

3. Prepare the data you want to provide.

const params = {
  data: [
      {
          x: 97,
          y: 210
      },
      {
          x: 50,
          y: 180
      },
      {
          x: 110,
          y: 190
      },
      {
          x: 78,
          y: 183
      },
      {
          x: 50,
          y: 210
      },
      {
          x: 90,
          y: 198
      },
      {
          x: 50,
          y: 180
      },
      {
          x: 110,
          y: 190
      }
  ]
};

4. Create a virtual bar chart inside the container you created.

const chart = new Chart('#chart', params);

5. Configure the bar chart with the following options.

const params = {
      iterations: 2,
      labels: {
        x: 'X label',
        y: 'Y label'
      },
      data: [],
      spacing: 0,
      mode: 'vertical' // or horizontal
};

Generate Bar Column Chart, Bar.js Plugin/Github

See Demo And Download

Official Website(themaxsandelin): Click Here

This superior jQuery/javascript plugin is developed by themaxsandelin. For extra Advanced Usages, please go to the official website.