Minimal Column Chart JavaScript Library – SimpleBarChart

Preview:

Description:

A tiny charting JavaScript library that lets you draw a customizable, flexible, scalable vertical bar chart (column chart) on an HTML5 canvas element.

How to use it:

1. Insert the main JavaScript SimpleChart.js into the document and we’re ready to go.

<script src="./src/SimpleChart.js"></script>

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

<canvas id="bar"></canvas>

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 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 appearance 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
})