How to Create a Simple Column Chart in Vanilla JavaScript

simplebarchart example of a simple bar chart using Html5 Canvas. A tiny charting JavaScript library that permits you to draw a customizable, versatile, scalable vertical bar chart (column chart) on an HTML5 canvas component.

How to make use of it:

1. Insert the primary JavaScript SimpleChart.js into the doc and we’re able to go.

2. Create an HTML5 canvas component for the column chart.

3. Specify the values and labels in JS arrays as follows:

const myValues = [0, 10, 40, 30, 15, 5, 20, 43, 45, 8, 18, 0]
const myLabels = ['12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm', '7pm' ,'8pm', '9pm', '11pm', '12am']

4. Create a brand new column chart instance.

const myChart = new SimpleBarChart({
      id: 'bar',
      values: myValues
      labels: myLabels
})

5. Render the column chart on the canvas.

myChart.draw()

6. Customize the looks of the column chart.

const myChart = new SimpleBarChart({
      // Background color
      backgroundColor: 'lightcoral',
      // Grid / Y-Axis Styles
      gridLineColor: 'black',
      gridFontFamily: 'sans-serif',
      gridFontSize: '18px',
      gridFontColor: 'black',
      gridLabelInset: 4,
      showZero: false,
      unit: '',
      gridLineStyle: 'solid', // solid, dashed
      dashes: 50
      dashGap: 2
      yAxisLine: false,
      showYAxisLabels: true,
      // X-Axis Styles
      xAxisFontFamily: 'sans-serif',
      xAxisFontSize: '18px',
      xAxisFontColor: 'black',
      xAxisLine: true,
      labelSpace: 30
})

Minimal Column Chart JavaScript Library, jQuery Bar chart Plugins, Canvas JS Bar Chart, SimpleBarChart Github