{"id":20075423,"url":"https://github.com/scc416/draw-bar-chart","last_synced_at":"2026-05-07T23:44:55.791Z","repository":{"id":106441796,"uuid":"418670101","full_name":"scc416/draw-bar-chart","owner":"scc416","description":"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.","archived":false,"fork":false,"pushed_at":"2022-01-07T00:20:50.000Z","size":53031,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-02T12:44:31.746Z","etag":null,"topics":["bar-chart","javascript","jquery","library","responsive"],"latest_commit_sha":null,"homepage":"https://scc416.github.io/draw-bar-chart/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scc416.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-18T21:11:34.000Z","updated_at":"2022-02-20T11:49:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"4ffb0f22-0f50-4a93-a993-13f3058dd0f7","html_url":"https://github.com/scc416/draw-bar-chart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/scc416/draw-bar-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scc416%2Fdraw-bar-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scc416%2Fdraw-bar-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scc416%2Fdraw-bar-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scc416%2Fdraw-bar-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scc416","download_url":"https://codeload.github.com/scc416/draw-bar-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scc416%2Fdraw-bar-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32760958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bar-chart","javascript","jquery","library","responsive"],"created_at":"2024-11-13T14:59:23.271Z","updated_at":"2026-05-07T23:44:55.783Z","avatar_url":"https://github.com/scc416.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Draw Bar Chart\n\nA 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.  \nSome optional options include `tickInterval`, `barColour`, `barSpacing`, `showLegend`, `scientificNotation` and `animationEffect`.\n\n## Table of Content\n\n- [Final Product](#final-product)\n- [Dependencies](#dependencies)\n- [Getting Started](#getting-started)\n- [Credits](#credits)\n\n## Final Product\n\nAll the examples below are in demo（run `index.html` file on your device or visit https://scc416.github.io/draw-bar-chart/).\n\n### Responsive Design\n\n![responsive](./docs/responsive.gif)\nThe options `height` and `width` are set as `\"90vh\"` and `\"90vw\"` respectively.\n\n### Single Bar Chart\n\n![single bar chart](./docs/single-bar-chart.png)\n\n### Single Bar Chart with all values below 1\n\n![single bar chart below 1](./docs/single-bar-chart-below-1.png)\n\n### Bar Chart with negative Values\n\n![neg values](./docs/neg-val.png)\n\n### Single Bar Chart with positive and negative values\n\n![pos and neg values](./docs/pos-and-neg-val.png)\n\n### Stacked Bar Chart\n\n![stacked](./docs/stacked.png)\n\n### Calculated interval\n\n![no preset tick interval](./docs/no-preset-tick-interval.png)\n\nBar chart with no preset tick interval.\n\n![set tick interval](./docs/set-tick-interval.png)\n\nThe same data with preset tick interval (0.5).\n\n### Scientific Notation\n\n![sci notation](./docs/sci-notation.png)  \nSee `scientificNotation` in options for this function.\n\n### Animation Effect\n\n![animation effect](./docs/animation-effect.gif)\n\nThis effect can be turned off. Read `animationEffect` in options.\n\n### Error Handling\n\n![error handling](./docs/error-handling.png)\n\n## Dependencies\n\n- [jQuery](https://jquery.com/): library to select and manipulate elements\n\n## Getting Started\n\nInclude jQuery in the html file.\n\n`\u003cscript src=\"https://code.jquery.com/jquery-3.6.0.min.js\"\u003e\u003c/script\u003e`\n\nPut `draw-bar-chart.js` and `draw-bar-chart.css` into your project folder. Include them in your `html` file.\n\n`\u003cscript src=\"path_to_file/draw-bar-chart.js\"\u003e\u003c/script\u003e`  \n`\u003clink href=\"path_to_file/draw-bar-chart.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e`\n\n\"Draw Bar Chart\" depends on jQuery, so jQuery has to come before `draw-bar-chart.js`.\n\nYou can also try the demo in `index.html`.\n\n## Documentation\n\nThe library has only one function, `drawBarChart(selector, data, options)`.\n\n### selector\n\n- Type: [Selector](https://api.jquery.com/category/selectors/)\n\nA string representing a selector expression to find an element for the bar chart to rendered in.\n\n### data\n\n- Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\n\nA set of key/value pairs that contains the values and labels of the bar chart\n\n#### **values**\n\n- Type:\n  - For single bar chart: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)\n  - For stacked bar chart: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)\n\n#### **labels** (optional)\n\n- Type: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\n\nIf `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.\n\n#### **stackLabels** (Optional, only for stacked bar chart)\n\n- Type: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\n\nLabels for legend of stacked bar chart. This doesn't need to be defined if `showLegend` is set to false (see `showLegend` in options).\nIf `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.\n\n### options\n\n- Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\n\nA set of key/value pairs that configure the bar chart. Most of the options are optional.\n\n#### **Id**\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\n\nThis 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.  \nId has to be unique.\n\n#### **tickInterval** (optional)\n\n- Type: [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)\n\n- Default: based on the value of the maximum and minimun data values\n\n#### **width** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: width)\n\n- Dafault: `\"100%\"`\n\n#### **height** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: height)\n\n- Dafault: `\"100%\"`\n\n#### **chartTitle** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n- Default: `\"\"`\n\n#### **titleFontSize** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: font-size)\n\n- Default: `\"2em\"`\n\n#### **titleColour** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: color)\n\n- Default: `\"black\"`\n\n#### **yAxisTitle** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n- Dafault: `\"\"` (empty string)\n\n#### **yAxisTitleFontSize** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: font-size)\n\n- Default: \"1.5em\"\n\n#### **yAxisLabelFontSize** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: font-size)\n\n- Default: \"1.2em\"\n\n#### **xAxisTitle** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n- Dafault: `\"\"` (empty string)\n\n#### **xAxisTitleFontSize** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: font-size)\n\n- Default: \"1.5em\"\n\n#### **xAxisLabelFontSize** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: font-size)\n\n- Default: \"1.2em\"\n\n#### **dataLabelPosition** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) - \"top\", \"centre\" or \"bottom\"\n\n- Default: \"top\"\n\nThis option indicates the position of the data (value) label on the bar.\n\n#### **dataLabelColour** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: color)\n\n- Default: \"white\"\n\n#### **dataLabelFontSize** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: font-size)\n\n- Default: \"1em\"\n\n#### **barColour** (optional)\n\n- Type:\n\n  - For single bar chart: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: font-size)\n  - For stacked bar chart: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 in `draw-bar-chart.js`)\n\n- Default:\n  - For single bar chart: first value of `DEFAULT_CSS_COLOR` (defined in `draw-bar-chart.js`), which is currently `\"SkyBlue\"`\n  - For Stack bar chart: strings in `DEFAULT_CSS_COLOR` (defined in `draw-bar-chart.js`). If there are more values than the number of colour string in `DEFAULT_CSS_COLOR`, then the colour will be repeated\n\n#### **barSpacing** (optional)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: margin)\n\n- Default: `\"1em\"`\n\n#### **showLegend** (optional, only for stacked bar chart)\n\n- Type: [Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)\n\n- Default: `true`\n\n#### **legendFontSize** (optional, only for stacked bar chart)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: font-size)\n\n- Default: `\"1.2em\"`\n\nFont size of the text in legend.\n\n#### **legendColour** (optional, only for stacked bar chart)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: color)\n\n- Default: `\"black\"`\n\nColour of the text in legend.\n\n#### stackLabelFontSize (optional, only for stacked bar chart)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: font-size)\n\n- Default: `\"1.1em\"`\n\nFont size for the label above the stacked bar.\n\n#### stackLabelColour (optional, only for stacked bar chart)\n\n- Type: [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) (any values that is supported by CSS property: color)\n\n- Default: `\"black\"`\n\nColour for the label above the stacked bar.\n\n#### **userSelect** (optional)\n\n- Type: [Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)\n\n- Default: `false`\n\nIf the text \u0026 value on the graph can be selected (i.e. highlighed) by users.\n\n#### **scientificNotation** (optional)\n\n- Type: [Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)\n\n- Default: `false`\n\nIf the values are displayed as [scientific notation](https://en.wikipedia.org/wiki/Scientific_notation). See [Final Product](#final-product) for more.\n\n#### **animationEffect** (optional)\n\n- Type: [Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)\n\n- Default: `true`\n\nSee [Final Product](#final-product) for the animation effect.\n\n### Credits\n\n- Statistics in the demo are taken from [World Bank](https://www.worldbank.org/en/home)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscc416%2Fdraw-bar-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscc416%2Fdraw-bar-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscc416%2Fdraw-bar-chart/lists"}