Generate Bar / Column Chart In Pure JavaScript – Bar.js

Preview:

Description:

Bar.js is a simple, tiny JS library used for dynamically rendering horizontal and/or vertical bar/column charts from plain JS data.

How to use it:

Import the CSS file bar.css in the header, and the JS file bar.js at the bottom of the document.

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

Create a container to hold your bar chart.

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

Prepare the data you want to present.

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
      }
  ]
};

Generate a default bar chart inside the container you created.

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

Config 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
};