Simple charting library in Vanilla js

For now download SimpleBarChart.js and place it in your project directory

const bars = new SimpleBarChart({
    id: 'bar',
    values: [11.2,28,3,39,15,36,17],
    labels: ['Bar 1', 'Bar 2', 'Bar 3', 'Bar 4', 'Bar 5', 'Bar 6', 'Bar 7']
})

bars.draw()

• id - Element id referring to the canvas element to draw the chart on
• values - List of values to display
• labels - List of labels associated with list of values

• backgroundColor - Valid CSS color for chart background - default is lightcoral
• Y-Axis
  • gridLineColor - Valid CSS color for grid lines - default is black
  • gridFontFamily - Font for y-axis labels - default is sans-serif
  • gridFontColor - Font color for y-axis labels - default is black
  • gridFontSize - Font size for y-axis labels - default is 18px
  • gridLabelInset - Inset of y-axis labels from edge of canvas - default is 2
  • showZero - Show or hide 0 on y-axis, boolean
• X-Axis
  • xAxisFontFamily - Font for x-axis labels - default is sans-serif
  • xAxisFontSize - Font size for x-axis - default is 18px
  • xAxisFontColor - Font color for x - axis labels - default is black
  • labelSpace - Space between x-axis labels and bottom of canvas - default is 30

• fillEvenly - Fill space evenly with bars or let them expand beyond with horizontal scrolling (Note: Horizontal scrolling in progress)
• barSpacing - Space between bars
• barWidth - Width of bars
• barHoverFontFamily - Font of hover labels on bars - default is sans-serif
• barHoverFontSize - Font size of hover labels on bars - default is 24px
• barHoverFontColor - Font color of hover labels on bars - default is black
• hover - Highlight bar if mouse hovers - boolean (Not finished)
• colors - List of CSS colors for bars
• topSpacing - Spacing from top of chart to top of canvas - default is 50
• shadowColor - Box shadow color around highlighted bar when hovering - default is black
• shadowSize - Size of box shadow around highlighted bar - default is 4
• scale - Scale for y-axis - default is 5