Chart.js plugin for Prometheus data loading

Overview

Welcome to chartjs-plugin-datasource-prometheus 👋

NPM version jsDelivr Downloads License: MIT

A Prometheus datasource for ChartJS.

screenshot

Dependencies:

Demonstration:

https://samber.github.io/chartjs-plugin-datasource-prometheus/example/

I would be happy to add links to charts using this library. Feel free to reach me by creating an issue ;)

✨ Features

  • Loads time-series from Prometheus into Chart.js.
  • Similar to Grafana, but ported to Chart.js for public-facing web applications.
  • UMD compatible, you can use it with any module loader
  • Supports line chart only (for now!)
  • Graph auto-refresh
  • Date interval can be absolute or relative to now
  • Multiple Prometheus queries into the same chart
  • Custom backend requests (useful for multitenant apps)
  • Hooks available (styling, labeling, data presentation...)
  • Custom chart messages for errors or empty Prometheus responses
  • Break or continuous lines when gap in data
  • Line styling
  • Send queries with your own Prometheus driver

⚠️ This project is not intented to replace Grafana. For monitoring purpose or internal company graph showing, Grafana will definitely be better and more secure.

🚀 Installation

Via npm:

npm install momentjs chart.js --save

npm install chartjs-plugin-datasource-prometheus --save

Via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource-prometheus/dist/chartjs-plugin-datasource-prometheus.umd.min.js"></script>

💡 Note that chartjs-plugin-datasource-prometheus must be loaded after Chart.js and Moment.js.

💡 Quick start

chartjs-plugin-datasource-prometheus can be used with ES6 modules, plain JavaScript and module loaders.

<canvas id="myChart"></canvas>

Then, you need to register the plugin to enable it for all charts in the page.

Chart.plugins.register(ChartDatasourcePrometheusPlugin);

Or, you can enable the plugin only for specific charts.

var chart = new Chart(ctx, {
    plugins: [ChartDatasourcePrometheusPlugin],
    options: {
        // ...
    }
});

In the example below, we display Go duration of garbage collection, for the last 12 hours:

var myChart = new Chart(ctx, {
  type: 'line',
  plugins: [ChartDatasourcePrometheusPlugin],
  options: {
    plugins: {
      'datasource-prometheus': {
        prometheus: {
          endpoint: "https://prometheus.demo.do.prometheus.io",
          baseURL: "/api/v1",   // default value
        },
        query: 'sum by (job) (go_gc_duration_seconds)',
        timeRange: {
          type: 'relative',

          // from 12 hours ago to now
          start: -12 * 60 * 60 * 1000,
          end: 0,
        },
      },
    },
  },
});

💬 Spec

Options

Property Required Description Default
prometheus.endpoint yes Prometheus hostname
prometheus.baseURL no Prometheus metric path "/api/v1"
prometheus.headers no Headers to add to Prometheus request
prometheus.auth.username no Basic auth username
prometheus.auth.password no Basic auth password
prometheus.proxy.host no Proxy hostname
prometheus.proxy.port no Proxy port
prometheus.withCredentials no Send cookies in cross-site requests false
prometheus.timeout no Prometheus request timeout in milliseconds 10000
query yes Prometheus query: string or function (see below). Supports multiple queries, using an array.
timeRange.type no Time range type: absolute or relative "absolute"
timeRange.start yes Time range start: Date object (absolute) or integer (relative)
timeRange.end yes Time range end: Date object (absolute) or integer (relative)
timeRange.step no Time between 2 data points [computed]
timeRange.minStep no Min time between 2 data points null
timeRange.msUpdateInterval no Update interval in millisecond null
fillGaps no Insert NaN values when values are missing in time range false
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
cubicInterpolationMode no "default" or "monotone" "default"
stepped no false, true, "before", "middle" or "after" false
fill no Fills the area under the line false
borderWidth no Should I explain this field? 3
backgroundColor no Should I explain this field? See library source code
borderColor no Should I explain this field? See library source code
errorMsg.message no Overrides error messages null
errorMsg.font no Font of error messages "16px normal 'Helvetica Nueue'"
noDataMsg.message no Empty chart message "No data to display"
noDataMsg.font no Font of empty chart message "16px normal 'Helvetica Nueue'"

Hooks

Some hooks have been inserted into the library. It may help you to rewrite label names dynamically, set colors...

// 💡 For better serie labels, we are looking for a templating solution => please contribute ;)

Property Required Description Prototype
findInLabelMap no Custom serie label (serie: Metric) => string
findInBorderColorMap no Custom serie line color (serie: Metric) => string
findInBackgroundColorMap no Custom serie background color (serie: Metric) => string
dataSetHook no Modify data on the fly, right before display (datasets: ChartDataSet[]) => ChartDataSet[]

Examples

Multiple queries in one chart

The query field can be an array of queries. Returned series are aggregated in a single chart.

In case you want to show those queries on different axes, you can define a custom options.scales.yAxes field.

var myChart = new Chart(ctx, {
    type: 'line',
    plugins: [ChartDatasourcePrometheusPlugin],
    options: {
        scales: {
            yAxes: [
                {position: 'left'},
                {position: 'left'},
                {position: 'right'},
            ]
        },
        plugins: {
            'datasource-prometheus': {
                prometheus: {
                    endpoint: "https://prometheus.demo.do.prometheus.io",
                },
                query: ['node_load1', 'node_load5', 'node_load15'],
                timeRange: {
                    type: 'relative',

                    // from 12 hours ago to now
                    start: -12 * 60 * 60 * 1000,
                    end: 0,
                },
            },
        },
    },
});

screenshot

Auto refresh

Animations should be disabled when chart refresh itself.

var myChart = new Chart(ctx, {
    type: 'line',
    plugins: [ChartDatasourcePrometheusPlugin],
    options: {
        animation: {
            duration: 0,
        },
        plugins: {
            'datasource-prometheus': {
                prometheus: {
                    endpoint: "https://prometheus.demo.do.prometheus.io",
                },
                query: 'node_load1',
                timeRange: {
                    type: 'relative',

                    // from 10 minutes ago to now
                    start: -1 * 10 * 60 * 1000,
                    end: 0,
                    msUpdateInterval: 5000,
                },
            },
        },
    },
});

Custom queries

In 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.

In that case, the prometheus field can be ommited. Just pass a function with the following prototype: (start: Date, end: Date, step: number) => Promise<any>.

It can be combined with traditional string queries: query: ['node_load1', customReq].

// Here, we call a fictive API that gonna query Prometheus to get the list
// of comments, wrote by the current user during the past hour.
// This endpoint will return a Prometheus-like response.
function customReq(start, end, step) {
    const startTimestamp = start.getTime() / 1000;
    const endTimestamp = end.getTime() / 1000;

    const url = `https://api.example.com/user/activity?event_type=comment.write&range_start=${startTimestamp}&end=${endTimestamp}&range_step=${step}`;
    const headers = {'Authorization': 'Bearer Ainae1Ahchiew6UhseeCh7el'};

    return fetch(url, { headers })
        .then(response => response.json())
        .then(response => response['data']);
}

const myChart = new Chart(ctx, {
    type: 'line',
    plugins: [ChartDatasourcePrometheusPlugin],
    options: {
        plugins: {
            'datasource-prometheus': {
                query: customReq,
                timeRange: {
                    type: 'relative',
                    start: -1 * 60 * 60 * 1000, // 1h ago
                    end: 0,   // now
                },
            },
        },
    },
});

🤯 Troubleshooting

CORS

Start your Prometheus instance with --web.cors.origin="www.example.com" flag or even --web.cors.origin=".*" if you like living dangerously. 😅

🔐 Security advisory

Please read the security advisory of prometheus-query library.

In 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.

🤝 Contributing

The Prometheus Datasource is open source and contributions from community (you!) are welcome.

There are many ways to contribute: writing code, documentation, reporting issues...

How-to

Author

👤 Samuel Berthe

👤 Frantisek Svoboda

💫 Show your support

Give a ⭐️ if this project helped you!

support us

📝 License

Copyright © 2020 Samuel Berthe.

This project is MIT licensed.

Comments
  • Exclude empty label set from caption

    Exclude empty label set from caption

    Sometimes for some reasons I exclude any labels from resulting time series data. In this case we have captions of resulting charts in the form like: node_load1{}, node_load5{}, etc. Is it possible to switch off drawing of empty label sets?

    image

    opened by temppost2 4
  • Update data in chart without complete redraw

    Update data in chart without complete redraw

    Hello, I've just discovered Chart.js and this plugin, so the answer to my question is probably obvious. But I was wondering, is there a way to use the "auto refresh" functionality of this plugin, without having the whole chart be redrawn completely. Which is not very nice visually — and probably not very efficient as well. That's what I am talking about, when the data gets refreshed: ezgif-4-4f73504d1908 I would have expected the timespan to grow, and the existing data be shifted to the left. Do you see what I mean? Thanks.

    opened by dalbani 3
  • Javascript -> Typescript

    Javascript -> Typescript

    • rewrite of the lib into typescript
    • upgrade of dependencies
    • improved doc
    • added some default values
    • replaced cors proxy into demo

    @luizfer Could you please test the following version [email protected] plz? 🙏

    linked to #9

    opened by samber 2
  • Documentation / example of findInLabelMap

    Documentation / example of findInLabelMap

    I can't find any examples of how to use findInLabelMap to change the series labels in the final chart - are there any examples of how to use this to customize labels?

    opened by matthewmgamble 2
  • Add some features: Override step; add NaN points to fit original time range

    Add some features: Override step; add NaN points to fit original time range

    We needed some features to show metrics from Prometheus

    • override step query parametr, I think it's simple and there is nothing to comment
    • fit original time range - show X-axis by start and end parameters
      • Prometheus API (we use Victoria Metrics) returns only known data, so when you lost some metrics you cannot see it by charts because chartjs break points only for NaN or null values.
    • algorthym isn't super cool, simply checks time between 2 siblings and add so many points with NaN to fill gap.
    • there is strange constant 1100 it like 1000 (to round miliseconds and) *1.1 as coeficient like a dispersion.

    Note: I see that package.json should be in pull request. I am not sure if it's possible to skip this file in pull request without change commits.

    opened by sFrenkie 2
  • baseURL as public parameter

    baseURL as public parameter

    Hello @samber ,

    Thanks for this grat plugin.

    Would it be possible to make the internal parameter baseURL public ?

    ...
    baseURL: this.endpoint + "/api/v1/",
     ...
    

    something like this could be done here:

    ...
    this.endpoint = options.endpoint.replace(/\/$/, "");
    this.baseURL = options.baseURL || this.endpoint + "/api/v1/",
    ...
    

    then here

    ...
    baseURL: this.baseURL,
    ...
    

    instead of :

    ...
    baseURL: this.endpoint + "/api/v1/",,
    ...
    

    My use case is that I proxy the request via a custom application and the url in my case would need to look like this when reaching my app:

    • https://my_super_app.com/prometheus?something=abc?somethingElse=efg

    Then I manage the construction of the URL in my backend to format the URL as necessary.

    Thanks

    opened by matth-c3 2
  • Background colour defaults to border colour with more transparency wh…

    Background colour defaults to border colour with more transparency wh…

    I started using this package, but it looks like options.fill doesn't behave as expected (at least according to my interpretation, which could be wrong).

    Current functionality: When options.fill is set to something, the graphs do not render with a fill colour unless the user also specifically defines an array of colours for the backgroundColor property. This is contrary to the behaviour of the borderColor property which conveniently defaults to a 'random' colour for the user.

    Proposed Functionality: When a user sets a value for options.fill, the backgroundColor property should default to a more transparent version of the border colour chosen for that data set. This is consistent with normal Graphana behaviour.

    I have made a modification to the code that does this after setting options.fill to any Javascript 'truthy' value. It uses the existing commented out fill colours that are, in my eyes, were a good amount of 'more transparent'

    opened by jbarkovic 1
  • Multiple queries on a single chart

    Multiple queries on a single chart

    Hello, Thank you for this helpful plugin!

    I understand this is not to replace Grafana, but is there a way to feed more than one query to the chart ?

    My use case is to draw two lines, one for a total sum of type1 entities over time, and one for a sum of type2 entities overtime. These come from two different prometheus metrics.

    I can't find a way to do it on the same chart.

    Any idea or workaround ?

    Thanks again!

    opened by msrouchou 1
  • build(deps): bump acorn from 7.1.0 to 7.1.1

    build(deps): bump acorn from 7.1.0 to 7.1.1

    Bumps acorn from 7.1.0 to 7.1.1.

    Commits
    • 6d19489 Mark release 7.1.1
    • 793c0e5 More rigorously check surrogate pairs in regexp validator
    • b5c1787 Fix incorrect comment in regexp parser
    • 12ae8fe Parameterize dummy value and export isDummy
    • fa3ad8c Further refine acorn-walk types
    • 1d50286 Fix some errors in walk types
    • 97801f0 Mark acorn-walk 7.1.1
    • e9372c1 Further clean up walker types
    • de6edeb Remove NarrowNode from walk.d.ts
    • 1d85e7c Fix: acorn-walk type work with acorn's
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): bump minimatch from 3.0.4 to 3.1.2

    build(deps): bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump got and npm-check-updates

    build(deps): bump got and npm-check-updates

    Bumps got to 12.5.1 and updates ancestor dependency npm-check-updates. These dependencies need to be updated together.

    Updates got from 9.6.0 to 12.5.1

    Release notes

    Sourced from got's releases.

    v12.5.1

    • Fix compatibility with TypeScript and ESM 3b3ea67
    • Fix request body not being properly cached (#2150) 3e9d3af

    https://github.com/sindresorhus/got/compare/v12.5.0...v12.5.1

    v12.5.0

    • Disable method rewriting on 307 and 308 status codes (#2145) e049e94
    • Upgrade dependencies 8630815 f0ac0b3 4c3762a

    https://github.com/sindresorhus/got/compare/v12.4.1...v12.5.0

    v12.4.1

    Fixes

    • Fix options.context being not extensible b671480715dbbff908e9a385f5e714570c663cd7
    • Don't emit uploadProgress after promise cancelation 693de217b030816f574d6e4cb505ee2e77b21c29

    https://github.com/sindresorhus/got/compare/v12.4.0...v12.4.1

    v12.4.0

    Improvements

    • Support FormData without known length (#2120) 850773c

    Fixes

    • Don&#39;t call beforeError hooks with HTTPError if the throwHttpErrors option is false (#2104) 3927348

    https://github.com/sindresorhus/got/compare/v12.3.1...v12.4.0

    v12.3.1

    • Don&#39;t freeze signal when freezing Options (#2100) 43b1467

    https://github.com/sindresorhus/got/compare/v12.3.0...v12.3.1

    v12.3.0

    • Add .off() method for events (#2092) 88056be

    https://github.com/sindresorhus/got/compare/v12.2.0...v12.3.0

    v12.2.0

    https://github.com/sindresorhus/got/compare/v12.1.0...v12.2.0

    v12.1.0

    Improvements

    ... (truncated)

    Commits

    Updates npm-check-updates from 12.5.9 to 16.3.7

    Release notes

    Sourced from npm-check-updates's releases.

    v16.3.0

    Feature

    • Added workspace support! 🚢

    Upgrade all workspaces:

    ncu --workspaces
    ncu -ws
    

    Upgrade a single workspace:

    ncu --workspace a
    ncu -w a
    

    Upgrade more than one workspace:

    ncu --workspace a --workspace b
    ncu -w a -w b
    

    Upgrade all workspaces AND the root project:

    ncu --workspaces --root
    

    Upgrade a single workspace AND the root project:

    ncu --workspace a --root
    

    Notes

    • If workspaces or --workspace is run in --interactive mode, ncu will prompt to npm install once in the root project rather than separately in each workspace (#1182).
    • Running --deep will not trigger workspace support.

    v16.0.0

    Breaking

    • Automatic detection of package data on stdin has been removed. This feature was deprecated in v14.0.0. Add --stdin for old behavior. (#136)
    • Wild card filters now apply to scoped packages. Previously, ncu -f '*vite*' would not include @vitejs/plugin-react. Now, filters will match any part of the package name, including the scope. Use a more specific glob or regex expression for old behavior. (#1168)

    v15.0.0

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Samuel Berthe
CTO @ScreebApp
Samuel Berthe
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 172 Nov 18, 2022
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 22 Nov 15, 2022
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
Chart.js plugin for live streaming data

chartjs-plugin-streaming Chart.js plugin for live streaming data chartjs-plugin-streaming 2.x requires Chart.js 3.0.0 or later. If you need Chart.js 2

Akihiko Kusanagi 400 Nov 16, 2022
Draggable data points plugin for Chart.js

chartjs-plugin-dragdata.js Now compatible with Chart.js v3 ?? Looking for a version compatible to Chart.js < 2.9.x? Then visit the v2 branch! A plugin

Christoph Pahmeyer 195 Nov 20, 2022
Chart.js plugin to display labels on data elements

Overview Highly customizable Chart.js plugin that displays labels on data for any type of charts. Requires Chart.js 3.x. Documentation Introduction Ge

Chart.js 739 Nov 16, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Nov 22, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Nov 22, 2022
Chart.js scale for hierarchical tree-like data structure

Chart.js Hierarchical Scale Plugin Chart.js module for adding a new categorical scale which mimics a hierarchical tree. Related Plugins Check out also

Samuel Gratzl 39 Nov 9, 2022
Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

vis.js 1.2k Nov 25, 2022
Zoom and pan plugin for Chart.js

chartjs-plugin-zoom A zoom and pan plugin for Chart.js >= 3.0.0 For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin. Panning can be

Chart.js 507 Nov 27, 2022
Chart.js plugin for more styling options

chartjs-plugin-style Chart.js plugin for more styling options This plugin requires Chart.js 2.6.0 or later. Installation You can download the latest v

Akihiko Kusanagi 57 Oct 27, 2022
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

chartjs-plugin-rough Chart.js plugin to create charts with a hand-drawn, sketchy, appearance Version 0.2 requires Chart.js 2.7.0 or later, and Rough.j

Akihiko Kusanagi 72 Nov 9, 2022
Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions.

chartjs-plugin-regression Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions using

Wilfredo Pomier 13 Oct 22, 2022
Annotation plugin for Chart.js

chartjs-plugin-annotation.js An annotation plugin for Chart.js >= 3.0.0 This plugin needs to be registered. It does not function as inline plugin. For

Chart.js 507 Nov 16, 2022
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.2k Nov 21, 2022
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.2k Nov 23, 2022