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