A library for displaying responsive bar chart with jQuery. The library has one function, this function can handle bar chart with single or stacked values, positive and/or negative values.
Some optional options include tickInterval
, barColour
, barSpacing
, showLegend
, scientificNotation
and animationEffect
.
All the examples below are in demo(run index.html
file on your device or visit https://scc416.github.io/draw-bar-chart/).
The options height
and width
are set as "90vh"
and "90vw"
respectively.
Bar chart with no preset tick interval.
The same data with preset tick interval (0.5).
See scientificNotation
in options for this function.
This effect can be turned off. Read animationEffect
in options.
- jQuery: library to select and manipulate elements
Include jQuery in the html file.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Put draw-bar-chart.js
and draw-bar-chart.css
into your project folder. Include them in your html
file.
<script src="path_to_file/draw-bar-chart.js"></script>
<link href="path_to_file/draw-bar-chart.css" rel="stylesheet" type="text/css" />
"Draw Bar Chart" depends on jQuery, so jQuery has to come before draw-bar-chart.js
.
You can also try the demo in index.html
.
The library has only one function, drawBarChart(selector, data, options)
.
- Type: Selector
A string representing a selector expression to find an element for the bar chart to rendered in.
- Type: Object
A set of key/value pairs that contains the values and labels of the bar chart
If labels
is not defined (or it is not an array), or if number of labels is less than number of values
, then nothing will be displayed for (some) label.
Labels for legend of stacked bar chart. This doesn't need to be defined if showLegend
is set to false (see showLegend
in options).
If stackLabels
is not defined (or it is not an array) the labels array is empty, or number of stack labels is less than number of stack, then nothing will be displayed for (some) labels in legend.
- Type: Object
A set of key/value pairs that configure the bar chart. Most of the options are optional.
- Type: String
This is crucial, especially when there are multiple bar charts, so the function can get the width of y-axis (of the correct graph) to set the position of the x-axis.
Id has to be unique.
-
Type: Number
-
Default: based on the value of the maximum and minimun data values
-
Type: String (any values that is supported by CSS property: width)
-
Dafault:
"100%"
-
Type: String (any values that is supported by CSS property: height)
-
Dafault:
"100%"
-
Type: String
-
Default:
""
-
Type: String (any values that is supported by CSS property: font-size)
-
Default:
"2em"
-
Type: String (any values that is supported by CSS property: color)
-
Default:
"black"
-
Type: String
-
Dafault:
""
(empty string)
-
Type: String (any values that is supported by CSS property: font-size)
-
Default: "1.5em"
-
Type: String (any values that is supported by CSS property: font-size)
-
Default: "1.2em"
-
Type: String
-
Dafault:
""
(empty string)
-
Type: String (any values that is supported by CSS property: font-size)
-
Default: "1.5em"
-
Type: String (any values that is supported by CSS property: font-size)
-
Default: "1.2em"
-
Type: String - "top", "centre" or "bottom"
-
Default: "top"
This option indicates the position of the data (value) label on the bar.
-
Type: String (any values that is supported by CSS property: color)
-
Default: "white"
-
Type: String (any values that is supported by CSS property: font-size)
-
Default: "1em"
-
Type:
- For single bar chart: String (any values that is supported by CSS property: font-size)
- For stacked bar chart: Array of String (all strings have to be supported by CSS property: color). If the number of colour is less than number of values, the colour array would be repeated. If one of the colour string is not supported by CSS, it will be replaced by one of the colour in
DEFAULT_CSS_COLOR
(defined indraw-bar-chart.js
)
-
Default:
- For single bar chart: first value of
DEFAULT_CSS_COLOR
(defined indraw-bar-chart.js
), which is currently"SkyBlue"
- For Stack bar chart: strings in
DEFAULT_CSS_COLOR
(defined indraw-bar-chart.js
). If there are more values than the number of colour string inDEFAULT_CSS_COLOR
, then the colour will be repeated
- For single bar chart: first value of
-
Type: String (any values that is supported by CSS property: margin)
-
Default:
"1em"
-
Type: Boolean
-
Default:
true
-
Type: String (any values that is supported by CSS property: font-size)
-
Default:
"1.2em"
Font size of the text in legend.
-
Type: String (any values that is supported by CSS property: color)
-
Default:
"black"
Colour of the text in legend.
-
Type: String (any values that is supported by CSS property: font-size)
-
Default:
"1.1em"
Font size for the label above the stacked bar.
-
Type: String (any values that is supported by CSS property: color)
-
Default:
"black"
Colour for the label above the stacked bar.
-
Type: Boolean
-
Default:
false
If the text & value on the graph can be selected (i.e. highlighed) by users.
-
Type: Boolean
-
Default:
false
If the values are displayed as scientific notation. See Final Product for more.
-
Type: Boolean
-
Default:
true
See Final Product for the animation effect.
- Statistics in the demo are taken from World Bank