Author: | nschairer |
---|---|
Views Total: | 104 views |
Official Page: | Go to website |
Last Update: | August 29, 2020 |
License: | MIT |
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 })