{"id":13702044,"url":"https://github.com/samber/chartjs-plugin-datasource-prometheus","last_synced_at":"2025-05-16T07:07:45.029Z","repository":{"id":39586063,"uuid":"240982145","full_name":"samber/chartjs-plugin-datasource-prometheus","owner":"samber","description":"📊 Chart.js plugin for Prometheus","archived":false,"fork":false,"pushed_at":"2025-04-18T18:28:39.000Z","size":1687,"stargazers_count":115,"open_issues_count":4,"forks_count":21,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-15T14:12:12.222Z","etag":null,"topics":["chart","chartjs","chartjs-plugin","dashboard","datasource","grafana","graph","javascript","monitoring","plugin","prometheus","query","real-time","timeseries","tsdb"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/chartjs-plugin-datasource-prometheus","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/samber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":["samber"]}},"created_at":"2020-02-16T23:21:06.000Z","updated_at":"2025-05-09T06:41:51.000Z","dependencies_parsed_at":"2023-02-18T15:45:34.609Z","dependency_job_id":"0e10d8c4-0931-41c5-9e3e-90d8922d23c5","html_url":"https://github.com/samber/chartjs-plugin-datasource-prometheus","commit_stats":{"total_commits":122,"total_committers":9,"mean_commits":"13.555555555555555","dds":0.5163934426229508,"last_synced_commit":"a666e52980b12d50195bb6f8283fbf6976eb7f4a"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samber%2Fchartjs-plugin-datasource-prometheus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samber%2Fchartjs-plugin-datasource-prometheus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samber%2Fchartjs-plugin-datasource-prometheus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samber%2Fchartjs-plugin-datasource-prometheus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samber","download_url":"https://codeload.github.com/samber/chartjs-plugin-datasource-prometheus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254364259,"owners_count":22058877,"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":["chart","chartjs","chartjs-plugin","dashboard","datasource","grafana","graph","javascript","monitoring","plugin","prometheus","query","real-time","timeseries","tsdb"],"created_at":"2024-08-02T21:00:30.387Z","updated_at":"2025-05-16T07:07:40.018Z","avatar_url":"https://github.com/samber.png","language":"TypeScript","readme":"# Welcome to chartjs-plugin-datasource-prometheus 👋\n\n[![NPM version](https://img.shields.io/npm/v/chartjs-plugin-datasource-prometheus.svg?style=flat-square)](https://npmjs.com/package/chartjs-plugin-datasource-prometheus)\n\u003ca href=\"https://www.jsdelivr.com/package/npm/chartjs-plugin-datasource-prometheus\"\u003e\u003cimg src=\"https://data.jsdelivr.com/v1/package/npm/chartjs-plugin-datasource-prometheus/badge\" alt=\"jsDelivr Downloads\"\u003e\u003c/a\u003e\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](#)\n\n\u003e A Prometheus datasource for ChartJS.\n\n![screenshot](./doc/img/screenshot.png)\n\n\u003cdiv align=\"center\"\u003e\n  \u003chr\u003e\n  \u003csup\u003e\u003cb\u003eSponsored by:\u003c/b\u003e\u003c/sup\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://quickwit.io?utm_campaign=github_sponsorship\u0026utm_medium=referral\u0026utm_content=samber-chartjs-plugin-datasource-prometheus\u0026utm_source=github\"\u003e\n    \u003cdiv\u003e\n      \u003cimg src=\"https://github.com/samber/oops/assets/2951285/49aaaa2b-b8c6-4f21-909f-c12577bb6a2e\" width=\"240\" alt=\"Quickwit\"\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      Cloud-native search engine for observability - An OSS alternative to Splunk, Elasticsearch, Loki, and Tempo.\n    \u003c/div\u003e\n  \u003c/a\u003e\n  \u003chr\u003e\n\u003c/div\u003e\n\n#### Dependencies:\n\n- requires [chart.js](https://www.chartjs.org) 4.0 or later.\n- requires a chart.js date provider to be registered, one of:\n  - [chartjs-adapter-date-fns](https://github.com/chartjs/chartjs-adapter-date-fns)\n  - [chartjs-adapter-moment](https://github.com/chartjs/chartjs-adapter-moment)\n  - [chartjs-adapter-luxon](https://github.com/chartjs/chartjs-adapter-luxon)\n  - if unsure, chartjs-adapter-date-fns is a good pick\n- requires [prometheus-query](https://github.com/samber/prometheus-query-js) 3.0 or later.\n\n#### Demonstration:\n\n[https://samber.github.io/chartjs-plugin-datasource-prometheus/example/](https://samber.github.io/chartjs-plugin-datasource-prometheus/example/)\n\nI would be happy to add links to charts using this library. Feel free to reach me by creating an issue ;)\n\n## ✨ Features\n\n- Loads time-series from Prometheus into Chart.js.\n- **Similar to Grafana**, but ported to Chart.js for public-facing web applications.\n- **UMD compatible**, you can use it with any module loader\n- Have been tested with *line chart* and (stacked) *bar chart*. The library should be compatible with more chart types.\n- Graph **auto-refresh**\n- Date interval can be **absolute** or **relative** to `now`\n- Multiple Prometheus queries into the same chart\n- Stacked series\n- Custom backend requests (useful for multitenant apps)\n- Hooks available (styling, labeling, data presentation...)\n- Custom chart messages for errors or empty Prometheus responses\n- Break or continuous lines when gap in data\n- Line styling\n- Send queries with your own Prometheus driver\n\n⚠️ This project is not intented to replace [Grafana](https://grafana.com/). For monitoring purpose or internal company graph showing, Grafana will definitely be better and more secure.\n\n## 🚀 Installation\n\nVia npm:\n\n```bash\nnpm install momentjs chart.js --save\n\nnpm install chartjs-plugin-datasource-prometheus --save\n```\n\nVia CDN:\n\nAdd inside of `\u003chead\u003e` the following:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3/dist/chartjs-adapter-date-fns.bundle.min.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource-prometheus@2/dist/chartjs-plugin-datasource-prometheus.umd.min.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\n💡 Note that chartjs-plugin-datasource-prometheus must be loaded after Chart.js and the date-fns adapter.\n\nHere is used the jsDelivr CDN with specifying only a major version so any minor and patch updates will be applied automatically.\nIf you need to use a specific version or ESM the copy link from https://www.jsdelivr.com/package/npm/chartjs-plugin-datasource-prometheus\n\n\n## 💡 Quick start\n\nchartjs-plugin-datasource-prometheus can be used with ES6 modules, plain JavaScript and module loaders.\n\n```html\n\u003ccanvas id=\"myChart\"\u003e\u003c/canvas\u003e\n```\n\nThen, you need to register the plugin to enable it for all charts in the page.\n\n```js\nChart.registry.plugins.register(ChartDatasourcePrometheusPlugin);\n```\n\nOr, you can enable the plugin only for specific charts.\n\n```js\nvar chart = new Chart(ctx, {\n    plugins: [ChartDatasourcePrometheusPlugin],\n    options: {\n        // ...\n    }\n});\n```\n\nIn the example below, we display Go duration of garbage collection, for the last 12 hours:\n\n```js\nvar myChart = new Chart(ctx, {\n  type: 'line',\n  plugins: [ChartDatasourcePrometheusPlugin],\n  options: {\n    plugins: {\n      'datasource-prometheus': {\n        prometheus: {\n          endpoint: \"https://prometheus.demo.do.prometheus.io\",\n          baseURL: \"/api/v1\",   // default value\n        },\n        query: 'sum by (job) (go_gc_duration_seconds)',\n        timeRange: {\n          type: 'relative',\n\n          // from 12 hours ago to now\n          start: -12 * 60 * 60 * 1000,\n          end: 0,\n        },\n      },\n    },\n  },\n});\n```\n\n## 💬 Spec\n\n### Options\n\n| Property | Required | Description | Default |\n| --- | :---: | --- | --- |\n| **prometheus.endpoint** | yes | Prometheus hostname | |\n| **prometheus.baseURL** | no | Prometheus metric path | `\"/api/v1\"` |\n| **prometheus.headers** | no | Headers to add to Prometheus request | |\n| **prometheus.auth.username** | no | Basic auth username | |\n| **prometheus.auth.password** | no | Basic auth password | |\n| **prometheus.proxy.host** | no | Proxy hostname | |\n| **prometheus.proxy.port** | no | Proxy port | |\n| **prometheus.withCredentials** | no | Send cookies in cross-site requests | `false` |\n| **prometheus.timeout** | no | Prometheus request timeout in milliseconds | `10000` |\n| **query** | yes | Prometheus query: string or function (see below). Supports multiple queries, using an array. |  |\n| **timeRange.type** | no | Time range type: absolute or relative | `\"absolute\"` |\n| **timeRange.start** | yes | Time range start: Date object (absolute) or integer (relative) |  |\n| **timeRange.end** | yes | Time range end: Date object (absolute) or integer (relative) |  |\n| **timeRange.step** | no | Time between 2 data points | [computed] |\n| **timeRange.minStep** | no | Min time between 2 data points | `null` |\n| **timeRange.msUpdateInterval** | no | Update interval in millisecond | null |\n| **fillGaps** | no | Insert NaN values when values are missing in time range | `false` |\n| **tension** | no | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used | `0.4` |\n| **cubicInterpolationMode** | no | \"default\" or \"monotone\" | `\"default\"` |\n| **stepped** | no | false, true, \"before\", \"middle\" or \"after\" | `false` |\n| **stacked** | no | Whether values are stacked or not | false |\n| **fill** | no | Fills the area under the line | `false` |\n| **borderWidth** | no | Should I explain this field? | `3` |\n| **backgroundColor** | no | Should I explain this field? | See library source code |\n| **borderColor** | no | Should I explain this field? | See library source code |\n| **errorMsg.message** | no | Overrides error messages | `null` |\n| **errorMsg.font** | no | Font of error messages | `\"16px normal 'Helvetica Nueue'\"` |\n| **noDataMsg.message** | no | Empty chart message | `\"No data to display\"` |\n| **noDataMsg.font** | no | Font of empty chart message | `\"16px normal 'Helvetica Nueue'\"` |\n\n### Hooks\n\nSome hooks have been inserted into the library. It may help you to rewrite label names dynamically, set colors...\n\n// 💡  For better serie labels, we are looking for a templating solution =\u003e please contribute ;)\n\n| Property | Required | Description | Prototype |\n| --- | :---: | --- | --- |\n| **findInLabelMap** | no | Custom serie label | `(serie: Metric) =\u003e string` |\n| **findInBorderColorMap** | no | Custom serie line color | `(serie: Metric) =\u003e string` |\n| **findInBackgroundColorMap** | no | Custom serie background color | `(serie: Metric) =\u003e string` |\n| **dataSetHook** | no | Modify data on the fly, right before display | `(datasets: ChartDataSet[]) =\u003e ChartDataSet[]` |\n\n## Examples\n\n### Multiple queries in one chart\n\nThe `query` field can be an array of queries. Returned series are aggregated in a single chart.\n\nIn case you want to show those queries on different axes, you can define a custom `options.scales.yAxes` field.\n\n```js\nvar myChart = new Chart(ctx, {\n    type: 'line',\n    plugins: [ChartDatasourcePrometheusPlugin],\n    options: {\n        scales: {\n            yAxes: [\n                {position: 'left'},\n                {position: 'left'},\n                {position: 'right'},\n            ]\n        },\n        plugins: {\n            'datasource-prometheus': {\n                prometheus: {\n                    endpoint: \"https://prometheus.demo.do.prometheus.io\",\n                },\n                query: ['node_load1', 'node_load5', 'node_load15'],\n                timeRange: {\n                    type: 'relative',\n\n                    // from 12 hours ago to now\n                    start: -12 * 60 * 60 * 1000,\n                    end: 0,\n                },\n            },\n        },\n    },\n});\n```\n\n![screenshot](./doc/img/screenshot-multiple-queries.png)\n\n### Auto refresh\n\nAnimations should be disabled when chart refresh itself.\n\n```js\nvar myChart = new Chart(ctx, {\n    type: 'line',\n    plugins: [ChartDatasourcePrometheusPlugin],\n    options: {\n        animation: {\n            duration: 0,\n        },\n        plugins: {\n            'datasource-prometheus': {\n                prometheus: {\n                    endpoint: \"https://prometheus.demo.do.prometheus.io\",\n                },\n                query: 'node_load1',\n                timeRange: {\n                    type: 'relative',\n\n                    // from 10 minutes ago to now\n                    start: -1 * 10 * 60 * 1000,\n                    end: 0,\n                    msUpdateInterval: 5000,\n                },\n            },\n        },\n    },\n});\n```\n\n### Update\n\nQuery update:\n\n```js\nchart.options.plugins['datasource-prometheus'].query = \"new query\";\nchart.update({});\n```\n\nStart/end range update:\n\n```js\nchart.options.plugins['datasource-prometheus'].timeRange.start = startTime;\nchart.update({});\n```\n\n### Custom queries\n\nIn the context of a multitenant application, it is not a good idea to write a query on the browser side. In that scenario, you may need to send a custom request to your backend, which is responsible for doing the final Prometheus query.\n\nIn that case, the `prometheus` field can be ommited. Just pass a function with the following prototype: `(start: Date, end: Date, step: number) =\u003e Promise\u003cany\u003e`.\n\nIt can be combined with traditional string queries: `query: ['node_load1', customReq]`.\n\n```js\n// Here, we call a fictive API that gonna query Prometheus to get the list\n// of comments, wrote by the current user during the past hour.\n// This endpoint will return a Prometheus-like response.\nfunction customReq(start, end, step) {\n    const startTimestamp = start.getTime() / 1000;\n    const endTimestamp = end.getTime() / 1000;\n\n    const url = `https://api.example.com/user/activity?event_type=comment.write\u0026range_start=${startTimestamp}\u0026end=${endTimestamp}\u0026range_step=${step}`;\n    const headers = {'Authorization': 'Bearer Ainae1Ahchiew6UhseeCh7el'};\n\n    return fetch(url, { headers })\n        .then(response =\u003e response.json())\n        .then(response =\u003e response['data']);\n}\n\nconst myChart = new Chart(ctx, {\n    type: 'line',\n    plugins: [ChartDatasourcePrometheusPlugin],\n    options: {\n        plugins: {\n            'datasource-prometheus': {\n                query: customReq,\n                timeRange: {\n                    type: 'relative',\n                    start: -1 * 60 * 60 * 1000, // 1h ago\n                    end: 0,   // now\n                },\n            },\n        },\n    },\n});\n```\n\n## 🤯 Troubleshooting\n\n#### CORS\n\nStart your Prometheus instance with `--web.cors.origin=\"www.example.com\"` flag or even `--web.cors.origin=\".*\"` if you like living dangerously. 😅\n\n## 🔐 Security advisory\n\nPlease read the [security advisory](https://github.com/samber/prometheus-query-js#-security-advisory) of prometheus-query library.\n\nIn the context of a multitenant application, it is not a good idea to write a query on the browser side. In that scenario, you may need to use the \"custom request\" feature.\n\n## 🤝 Contributing\n\nThe Prometheus Datasource is open source and contributions from community (you!) are welcome.\n\nThere are many ways to contribute: writing code, documentation, reporting issues...\n\n[How-to](./CONTRIBUTING.md)\n\n## Author\n\n👤 **Samuel Berthe**\n\n* Twitter: [@samuelberthe](https://twitter.com/samuelberthe)\n* Github: [@samber](https://github.com/samber)\n\n👤 **Frantisek Svoboda**\n\n* Twitter: [@sFrenkie](https://twitter.com/sFrenkie)\n* Github: [@sFrenkie](https://github.com/sFrenkie)\n\n\n## 💫 Show your support\n\nGive a ⭐️ if this project helped you!\n\n[![support us](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/samber)\n\n## 📝 License\n\nCopyright © 2020 [Samuel Berthe](https://github.com/samber).\n\nThis project is [MIT](./LICENSE) licensed.\n","funding_links":["https://github.com/sponsors/samber","https://www.patreon.com/samber"],"categories":["TypeScript","Plugins"],"sub_categories":["Data Sources"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamber%2Fchartjs-plugin-datasource-prometheus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamber%2Fchartjs-plugin-datasource-prometheus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamber%2Fchartjs-plugin-datasource-prometheus/lists"}