{"id":21377206,"url":"https://github.com/greetclock/gauge-chart","last_synced_at":"2025-07-13T10:31:27.491Z","repository":{"id":29740351,"uuid":"122656795","full_name":"greetclock/gauge-chart","owner":"greetclock","description":"Gauge Chart Library","archived":false,"fork":false,"pushed_at":"2023-01-08T03:04:47.000Z","size":2485,"stargazers_count":53,"open_issues_count":16,"forks_count":23,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-11-14T11:11:44.337Z","etag":null,"topics":["charting-library","charts","gauge-chart","javascript","svg"],"latest_commit_sha":null,"homepage":"https://greetclock.github.io/gauge-chart/examples/samples/","language":"TypeScript","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/greetclock.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-23T18:16:32.000Z","updated_at":"2024-08-01T05:43:11.000Z","dependencies_parsed_at":"2023-01-14T15:34:09.309Z","dependency_job_id":null,"html_url":"https://github.com/greetclock/gauge-chart","commit_stats":null,"previous_names":["recogizer/gauge-chart"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greetclock%2Fgauge-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greetclock%2Fgauge-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greetclock%2Fgauge-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greetclock%2Fgauge-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greetclock","download_url":"https://codeload.github.com/greetclock/gauge-chart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225872106,"owners_count":17537358,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["charting-library","charts","gauge-chart","javascript","svg"],"created_at":"2024-11-22T09:19:35.368Z","updated_at":"2024-11-22T09:19:35.888Z","avatar_url":"https://github.com/greetclock.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gauge Chart\n\n**A library for creating nice and flexible gauge charts.**\n\n![GitHub Workflow Status](https://img.shields.io/github/workflow/status/greetclock/gauge-chart/Test%20Workflow?style=flat-square) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n## [Demo](https://greetclock.github.io/gauge-chart/examples/samples/)\n\n## Installation\n\nThe easiest way to get started is to install it via npm. When you import it in you code, then by default it will use CommonJS module.\n\n```\n  npm install gauge-chart\n```\n\n```js\nconst GaugeChart = require('gauge-chart')\n```\n\nYou can also import the library as ES Module:\n\n```js\nimport * as GaugeChart from 'https://unpkg.com/gauge-chart@next/dist/bundle.mjs'\n```\n\n## Usage\n\nCreate an element for positioning gauge in your html file:\n\n```html\n\u003cdiv id=\"gaugeArea\"\u003e\u003c/div\u003e\n```\n\nNow you're ready to draw your own gauge.\n\nJust copy this code into your Javascript or Typescript file or into `\u003cscript\u003e \u003c/script\u003e` tags in HTML file:\n\n```javascript\n// Element inside which you want to see the chart\nlet element = document.querySelector('#gaugeArea')\n\n// Properties of the gauge\nlet gaugeOptions = {\n  hasNeedle: true,\n  needleColor: 'gray',\n  needleUpdateSpeed: 1000,\n  arcColors: ['rgb(44, 151, 222)', 'lightgray'],\n  arcDelimiters: [30],\n  rangeLabel: ['0', '100'],\n  centralLabel: '50',\n}\n\n// Drawing and updating the chart\nGaugeChart.gaugeChart(element, 300, gaugeOptions).updateNeedle(50)\n```\n\n#### Result:\n\n![Gauge Example](/examples/img/gauge1.png 'Gauge Example')\n\nBy default, the needle is pointing to 0, thus in order to move it you have to use `.updateNeedle(val)`, where `val` denotes the value on the chart.\n\nFeel free to change or delete any of the gaugeOptions properties as long as their values are in permitted ranges.\n\n## Options\n\n#### gaugeOptions: { ... }\n\n| Name              | Values Ranges                                                                    | Description                                          |\n| ----------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------- |\n| hasNeedle         | true / false                                                                     | determines whether to show the needle or not         |\n| needleColor       | [value supported by CSS](https://www.w3schools.com/colors/default.asp)           | colorizes needle with specified colors               |\n| needleUpdateSpeed | number ⩾ 0                                                                       | determines the speed of needle update animation      |\n| arcColors         | [array of values supported by CSS](https://www.w3schools.com/colors/default.asp) | colorizes gauge with specified color                 |\n| arcDelimiters     | array of numbers from 0 to 100                                                   | specifies delimiters of the gauge in ascending order |\n| arcOverEffect     | true / false                                                                     | determines if over effect on ars is enabled or not   |\n| arcLabels         | array of strings                                                                 | specifies labels to be placed at delimiters ends     |\n| arcPadding        | number                                                                           | specifies padding between arcs (in pixels)           |\n| arcPaddingColor   | [value supported by CSS](https://www.w3schools.com/colors/default.asp)           | color of the padding between delimeters              |\n| rangeLabel        | array of two strings                                                             | depicts gauge ranges on both sides of the chart      |\n| centralLabel      | string                                                                           | depicts gauge inner label                            |\n| labelsFont        | string                                                                           | specifies font-family to be used for labels          |\n\n#### .gaugeChart( ... )\n\n| Name         | Values Ranges        | Description                                                     |\n| ------------ | -------------------- | --------------------------------------------------------------- |\n| element      | html element         | specifies an element which contains a chart                     |\n| chartWidth   | number larger than 0 | gives a width to the gauge (height is always 0.5 \\* chartWidth) |\n| gaugeOptions | object               | provides gauge properties (can be empty)                        |\n\n#### .updateNeedle( ... )\n\n| Name        | Values Ranges        | Description                         |\n| ----------- | -------------------- | ----------------------------------- |\n| needleValue | number from 0 to 100 | specifies needle value on the gauge |\n\n## Examples\n\nSome examples of what you can get out of the library using different properties:\n\n![Gauge Examples](/examples/img/gauges.png 'Gauge Examples')\n\n## Contributing\n\nBuild the library with `npm run build`. This will compile the `dist` files. To see the examples locally you can start a web server with `npm run dev`.\n\n## Authors\n\n[Alexey Karpov](https://github.com/greetclock), [Maxim Maltsev](https://github.com/mmaltsev).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreetclock%2Fgauge-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreetclock%2Fgauge-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreetclock%2Fgauge-chart/lists"}