Press "Enter" to skip to content

How to Create a Simple Column Chart in Vanilla JavaScript | SimpleBarChart

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.

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

How to make use of it:

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

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

2. Create an HTML5 canvas component 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 brand new column chart instance.

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

5. Render the column chart on the canvas.


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, vertical bar chart in html, horizontal bar chart in html

See Demo And Download

Official Website(nschairer): Click Here

This superior jQuery/javascript plugin is developed by nschairer. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.