makanz / chartjs-plugin-trendline Goto Github PK

View Code? Open in Web Editor NEW

80.0 5.0 57.0 272 KB

This plugin draws an linear trendline in your Chart. Made for Chart.js > 3.0

License: MIT License

JavaScript 43.68% HTML 56.32%

chartjs-plugin trendline

chartjs-plugin-trendline's Introduction

chartjs-plugin-trendline

This plugin draws an linear trendline in your Chart. It has been tested with Chart.js version 4.4.0.

Installation

Load directly in the browser

Load Chart.js first, then the plugin which will automatically register itself with Chart.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>

As a Chart.JS plugin

Install & import the plugin via npm:

npm i chart.js chartjs-plugin-trendline

import ChartJS from 'chart.js';
import chartTrendline from 'chartjs-plugin-trendline';

ChartJS.plugins.register(chartTrendline);

Configuration

To configure the trendline plugin you simply add a new config options to your dataset in your chart config.

{
	trendlineLinear: {
		colorMin: "red",
		colorMax: "green",
		lineStyle: "dotted|solid",
		width: 2,
		xAxisKey: "time" (optional),
		yAxisKey: "usage" (optional),
		projection: true|false (optional)
	}
}

Supported chart types

bar
line

Contributing

Pull requests and issues are always welcome. For bugs and feature requests, please create an issue.

License

chartjs-plugin-trendline.js is available under the MIT license.

chartjs-plugin-trendline's People

Contributors

Stargazers

Watchers

chartjs-plugin-trendline's Issues

CVE-2019-20149 (High) detected in kind-of-6.0.2.tgz

CVE-2019-20149 - High Severity Vulnerability

Vulnerable Library - kind-of-6.0.2.tgz

Get the native type of a value.

Library home page: https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz

Path to dependency file: chartjs-plugin-trendline/package.json

Path to vulnerable library: chartjs-plugin-trendline/node_modules/kind-of/package.json

Dependency Hierarchy:

gulp-4.0.2.tgz (Root Library)
- glob-watcher-5.0.3.tgz
  - anymatch-2.0.0.tgz
    - micromatch-3.1.10.tgz
      - ❌ kind-of-6.0.2.tgz (Vulnerable Library)

Found in base branch: master

Vulnerability Details

ctorName in index.js in kind-of v6.0.2 allows external user input to overwrite certain internal attributes via a conflicting name, as demonstrated by 'constructor': {'name':'Symbol'}. Hence, a crafted payload can overwrite this builtin attribute to manipulate the type detection result.

Publish Date: 2019-12-30

URL: CVE-2019-20149

CVSS 3 Score Details (7.5)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: High
- Availability Impact: None

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: http://web.nvd.nist.gov/view/vuln/detail?vulnId=CVE-2019-20149

Release Date: 2019-12-30

Fix Resolution: 6.0.3

Step up your Open Source Security Game with WhiteSource here

arithmetic moving average is not working

@Makanz
the moving average is not working, I used your example and put my data, the moving average line is straight instead of following the data like in Excel

it should be like this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BarChart Example</title>
    <script src="assets/js/chartjs/4.3.0/chart.js"></script>
    <script src="assets/js/chartjs/4.3.0/chartjs-plugin-trendline.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            // Bar chart
            new Chart(document.getElementById("bar-chart"), {
                type: 'bar',
                data: {
                    labels: [
                        '12(2020)',
                        '13(2020)',
                        '14(2020)',
                        '15(2020)',
                        '16(2020)',
                        '17(2020)',
                        '18(2020)',
                        '19(2020)',
                        '20(2020)',
                        '21(2020)',
                        '22(2020)',
                        '23(2020)',
                        '24(2020)',
                        '25(2020)',
                        '26(2020)',
                        '27(2020)',
                        '28(2020)',
                        '29(2020)',
                        '30(2020)',
                        '31(2020)',
                        '32(2020)',
                        '33(2020)',
                        '34(2020)',
                        '35(2020)',
                        '36(2020)',
                        '37(2020)',
                        '38(2020)',
                        '39(2020)',
                        '40(2020)',
                        '41(2020)',
                        '42(2020)',
                        '43(2020)',
                        '44(2020)',
                        '45(2020)',
                        '46(2020)',
                        '47(2020)',
                        '48(2020)',
                        '49(2020)',
                        '50(2020)',
                        '51(2020)',
                        '52(2020)',
                        '53(2020)',
                        '1(2021)',
                        '2(2021)',
                        '3(2021)',
                        '4(2021)',
                        '5(2021)',
                        '6(2021)',
                        '7(2021)',
                        '8(2021)',
                        '9(2021)',
                        '10(2021)',
                        '11(2021)',
                        '12(2021)',
                        '13(2021)',
                        '14(2021)',
                        '15(2021)',
                        '16(2021)',
                        '17(2021)',
                        '18(2021)',
                        '19(2021)',
                        '20(2021)',
                        '21(2021)',
                        '22(2021)',
                        '23(2021)',
                        '24(2021)',
                        '25(2021)',
                        '26(2021)',
                        '27(2021)',
                        '28(2021)',
                        '29(2021)',
                        '30(2021)',
                        '31(2021)',
                        '32(2021)',
                        '33(2021)',
                        '34(2021)',
                        '35(2021)',
                        '36(2021)',
                        '37(2021)',
                        '38(2021)',
                        '39(2021)',
                        '40(2021)',
                        '41(2021)',
                        '42(2021)',
                        '43(2021)',
                        '44(2021)',
                        '45(2021)',
                        '46(2021)',
                        '47(2021)',
                        '48(2021)',
                        '49(2021)',
                        '50(2021)',
                        '51(2021)',
                        '52(2021)',
                        '1(2022)',
                        '2(2022)',
                        '3(2022)',
                        '4(2022)',
                        '5(2022)',
                        '6(2022)',
                        '7(2022)',
                        '8(2022)',
                        '9(2022)',
                        '10(2022)',
                        '11(2022)',
                        '12(2022)',
                        '13(2022)',
                        '14(2022)',
                        '15(2022)',
                        '16(2022)',
                        '17(2022)',
                        '18(2022)',
                        '19(2022)',
                        '20(2022)',
                        '21(2022)',
                        '22(2022)',
                        '23(2022)',
                        '24(2022)',
                        '25(2022)',
                        '26(2022)',
                        '27(2022)',
                        '28(2022)',
                        '29(2022)',
                        '30(2022)',
                        '31(2022)',
                        '32(2022)',
                        '33(2022)',
                        '34(2022)',
                        '35(2022)',
                        '36(2022)',
                        '37(2022)',
                        '38(2022)',
                        '39(2022)',
                        '40(2022)',
                        '41(2022)',
                        '42(2022)',
                        '43(2022)',
                        '44(2022)',
                        '45(2022)',
                        '46(2022)',
                        '47(2022)',
                        '48(2022)',
                        '49(2022)',
                        '50(2022)',
                        '51(2022)',
                        '52(2022)',
                        '01(2023',
                        '02(2023)',
                        '03(2023)',
                        '04(2023)',
                        '05(2023)',
                        '06(2023)',
                        '07(2023)',
                        '08(2023)',
                        '09(2023)',
                        '10(2023)',
                        '11(2023)',
                        '12(2023)',
                        '13(2023)',
                        '14(2023)',
                        '15(2023)',
                        '16(2023)',
                        '17(2023)',
                        '18(2023)'],
                    datasets: [
                        {
                            label: "Info",
                            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                            data: [1,
                                7,
                                18,
                                31,
                                39,
                                33,
                                69,
                                107,
                                109,
                                103,
                                134,
                                124,
                                91,
                                105,
                                84,
                                110,
                                149,
                                111,
                                113,
                                76,
                                68,
                                66,
                                59,
                                70,
                                51,
                                51,
                                93,
                                76,
                                81,
                                86,
                                90,
                                114,
                                139,
                                140,
                                241,
                                287,
                                484,
                                440,
                                554,
                                610,
                                352,
                                364,
                                468,
                                347,
                                269,
                                220,
                                179,
                                162,
                                193,
                                272,
                                381,
                                345,
                                426,
                                325,
                                279,
                                249,
                                225,
                                231,
                                314,
                                358,
                                318,
                                335,
                                366,
                                339,
                                257,
                                272,
                                223,
                                198,
                                131,
                                131,
                                132,
                                178,
                                136,
                                231,
                                249,
                                167,
                                131,
                                174,
                                180,
                                123,
                                102,
                                75,
                                83,
                                51,
                                35,
                                28,
                                38,
                                30,
                                20,
                                15,
                                16,
                                12,
                                2,
                                5,
                                288,
                                1158,
                                2271,
                                1713,
                                860,
                                341,
                                124,
                                81,
                                28,
                                22,
                                28,
                                3,
                                7,
                                4,
                                7,
                                2,
                                17,
                                31,
                                32,
                                56,
                                123,
                                220,
                                399,
                                534,
                                803,
                                575,
                                376,
                                228,
                                85,
                                53,
                                41,
                                29,
                                19,
                                11,
                                7,
                                5,
                                0,
                                2,
                                1,
                                3,
                                3,
                                5,
                                10,
                                24,
                                63,
                                319,
                                511,
                                295,
                                196,
                                102,
                                83,
                                61,
                                41,
                                20,
                                22,
                                22,
                                14,
                                4,
                                18,
                                43,
                                54,
                                66,
                                67,
                                80,
                                56,
                                42,
                                41,
                                20,
                                24,
                                12],
                            trendlineLinear: {
                                colorMin: "rgba(255,105,180, .8)",
                                lineStyle: "dotted",
                                width: 2
                            }
                        },
                    ]
                },
                options: {
                    legend: { display: false },
                    title: {
                        display: true,
                        text: 'Predicted world population (millions) in 2050'
                    }
                }
            });
        });
    </script>
</head>

<body>
    <h1>Bar Chart</h1>

    <div style="width: 800px;">
        <canvas id="bar-chart"></canvas>
    </div>

    <p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/"
            target="_blank">tobiasahlin.com.</a></p>
</body>

</html>

Refreshing Data doesnt recal Trendline?

Plugin works fine on drawing using the standard "config" but Im updating the chart data set after the initial draw

for (var index = 0; index < 12; ++index) {
window.myLine.data.datasets[0].data[index] = newdata[index+12];
}
window.myLine.update();

But the trendline disappears? - Ive done some tracing and the data is entering the plugin - but hte Y scale always comes out as a negative - so I presume its drawing off canvas?

CVE-2020-7598 (Medium) detected in minimist-0.0.8.tgz, minimist-1.2.0.tgz

CVE-2020-7598 - Medium Severity Vulnerability

Vulnerable Libraries - minimist-0.0.8.tgz, minimist-1.2.0.tgz

minimist-0.0.8.tgz

parse argument options

Library home page: https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz

Dependency Hierarchy:

gulp-4.0.2.tgz (Root Library)
- glob-watcher-5.0.3.tgz
  - chokidar-2.1.6.tgz
    - fsevents-1.2.9.tgz
      - node-pre-gyp-0.12.0.tgz
        
        mkdirp-0.5.1.tgz
        
        ❌ minimist-0.0.8.tgz (Vulnerable Library)

minimist-1.2.0.tgz

parse argument options

Library home page: https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz

Dependency Hierarchy:

gulp-4.0.2.tgz (Root Library)
- glob-watcher-5.0.3.tgz
  - chokidar-2.1.6.tgz
    - fsevents-1.2.9.tgz
      - node-pre-gyp-0.12.0.tgz
        
        rc-1.2.8.tgz
        
        ❌ minimist-1.2.0.tgz (Vulnerable Library)

Found in base branch: master

Vulnerability Details

minimist before 1.2.2 could be tricked into adding or modifying properties of Object.prototype using a "constructor" or "proto" payload.

Publish Date: 2020-03-11

URL: CVE-2020-7598

CVSS 3 Score Details (5.6)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: High
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: Low
- Integrity Impact: Low
- Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://github.com/substack/minimist/commit/63e7ed05aa4b1889ec2f3b196426db4500cbda94

Release Date: 2020-03-11

Fix Resolution: minimist - 0.2.1,1.2.3

Step up your Open Source Security Game with WhiteSource here

Plugin execution error based on dadaset.data start with the value "null"

Hi, @Makanz!
When the dataset start with the value "null", the execution of the script is interrupted by error:
Uncaught TypeError: Cannot read property 'x' of null
chartjs-plugin-trendline.js: 52
Dataset example:
datasets: [{
data: [null,1,1,2,3,5],
}]
chartjs-plugin-trendline v0.1.3
Chart.js v2.9.3

Is data structure only support number array?

In chartjs official doc, it supports pure number array

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [20, 10],
    }],
    labels: ['a', 'b']
  }
}

and object array

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{x: 10, y: 20}, {x: 15, y: 30}, {x: 20, y: 10}]
    }]
  }
}

But when I try to use the object array with trendline plugin, the trendline didn't show up. I have debuged it and find that the createLinearGradient was using an extreme large x1 and x2 value(when the data is as above, the x1 is 536.3... , x2 is 1045.2... , while y1 is 60.15, and y2 is 116.4... Not sure if that make the trendline disappeared.
And if the x value in data is string,

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{x: '2016-12-25', y: 20}, {x: '2016-12-26', y: 10}]
    }]
  }
}

the x1, x2 will both be 32767, that's the integer's border. While y1 and y2 will be NaN

Trendlines for react-chartjs?

I am actually using the react-chartjs-2 module which wraps chartjs v2.5+. Trendline isnt working for me but Im just looking to confirm if it simply wont, or if it should then its something Im coding. I have simply added the trendlineLiner config to the options object of a bar chart but no trendline is appearing

How to use without Node?

I am using ChartJS via PHP Composer - is there a way/version of the standalone JS that I can include instead of converting my website to use node?

Here is my JS portion. It shows everything but a trendline, with no console errors.: https://pastebin.com/rdxHG8mW

Bug: Trendline is broken when data is an object

When data is an array of number, it works fine.

let chartData = {
    labels: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December',
    ],
    datasets: [
        {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
            trendlineLinear: {
                colorMin: '#2d9cdb',
                colorMax: '#2d9cdb',
                lineStyle: 'solid',
                width: 2,
            },
        },
    ],
}

But it's not when data is an object:

let chartData = {
    datasets: [
        {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [
                { y: 40, x: 'January' },
                { y: 20, x: 'February' },
                { y: 12, x: 'March' },
                { y: 39, x: 'April' },
                { y: 10, x: 'May' },
                { y: 40, x: 'June' },
                { y: 39, x: 'July' },
                { y: 80, x: 'August' },
                { y: 40, x: 'September' },
                { y: 20, x: 'October' },
                { y: 12, x: 'November' },
                { y: 11, x: 'December' },
            ],
            trendlineLinear: {
                colorMin: '#2d9cdb',
                colorMax: '#2d9cdb',
                lineStyle: 'solid',
                width: 2,
            },
        },
    ],
}

It could be a bug in the library as it shows this error
Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite.

Here is a reproducible sandbox when data is an array of objects:
https://codesandbox.io/s/data-as-object-i4tjdb?file=/src/index.js

When data is an array of numbers: https://codesandbox.io/s/working-trendline-q31h0o?file=/src/index.js

My assumption is that this library doesn't support data objects. So data objects using custom properties would not work as well.
https://www.chartjs.org/docs/3.9.1/general/data-structures.html#object-using-custom-properties

Trendline plugin is not being integrated with vue-chartjs

I tried adding it using addPlugin, or registering it to Chart plugins, both didn't work

CVE-2020-7746 (High) detected in Chart-2.7.3.min.js

CVE-2020-7746 - High Severity Vulnerability

Vulnerable Library - Chart-2.7.3.min.js

Simple HTML5 charts using the canvas element.

Library home page: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js

Path to dependency file: chartjs-plugin-trendline/example/barChart.html

Path to vulnerable library: chartjs-plugin-trendline/example/barChart.html

Dependency Hierarchy:

❌ Chart-2.7.3.min.js (Vulnerable Library)

Vulnerability Details

This affects the package chart.js before 2.9.4. The options parameter is not properly sanitized when it is processed. When the options are processed, the existing options (or the defaults options) are deeply merged with provided options. However, during this operation, the keys of the object being set are not checked, leading to a prototype pollution.

Publish Date: 2020-10-29

URL: CVE-2020-7746

CVSS 3 Score Details (7.5)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2020-7746

Release Date: 2020-07-21

Fix Resolution: chart.js - 2.9.4

Step up your Open Source Security Game with WhiteSource here

Trendline overlaps the y-axis label if there are data points outside of the range of the x-axis

Picture speaks for itself. I use chartjs in combination with chartjs-plugin-zoom. Any solution for this?

Add Accessibility to the chart

Is there a supported way to make the charts accessible? (allow to focus on the chart dots to open the details, etc) and to correctly output descriptions using voice over?

Line Charts

Any chance to make this feature available for line charts as well?

My trend line doesn't show up

My code is this:

<script type="text/javascript" async>
  let testing;
  async function myFunction() {
    let each = new Array();
    let test = await fetch(
      "https://api.corona-zahlen.org/districts/09462/history/incidence/7"
    );
    /*.then((res) => res.json())
        .then((data) => {
          console.log(data.data["09472"].history);
          data.data["09472"].history
            .slice()
            .reverse()
            .forEach(async (data) => {
                await each.push(Number(data.weekIncidence.toFixed()))
              //document.write(`${data.weekIncidence.toFixed()}<br>`);
            });
        });*/
    testing = await test.json();
    console.log(testing.data["09462"].history);
    return testing;
  }

  myFunction().then((result) => {
    result = result.data["09462"].history;
    function date(date) {
      var date = new Date(date);
      var result = date.toLocaleDateString("de-DE", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
      });
      return result;
    }
    const labels = [
      date(result[0].date),
      date(result[1].date),
      date(result[2].date),
      date(result[3].date),
      date(result[4].date),
      date(result[5].date),
      date(result[6].date),
    ];
    const data = {
      labels: labels,
      datasets: [
        {
          label: "Inzidenz in Bayreuth",
          backgroundColor: "rgb(255, 99, 132)",
          borderColor: "rgb(255, 99, 132)",
          data: [
            result[0].weekIncidence,
            result[1].weekIncidence,
            result[2].weekIncidence,
            result[3].weekIncidence,
            result[4].weekIncidence,
            result[5].weekIncidence,
            result[6].weekIncidence,
          ],
          fill: false,
          trendlineLinear: {
            style: "#8e5ea2",
            lineStyle: "line",
            width: 1,
          },
        },
      ],
    };

    const config = {
      type: "line",
      data,
      options: {},
    };

    var myChart = new Chart(document.getElementById("myChart"), config);
  });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

Not working with chart.js Version 4.x

Do you have any suggestions on how to make this working in chat.js versions 4.x?

New error: Failed to execute 'createLinearGradient'

When use data: [0] in order to inicialize the chart ...
New issue in all charts with trendlineLinear: Uncaught TypeError: Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite. (at addFitter, chartjs-plugin-trendline.js:132:23)

Using:

Chart:
. . .
trendlineLinear: {
colorMin: "red",
colorMax: "green",
lineStyle: "dotted",
width: 1,
projection: false
}
. . .

TrendLine overlaps Tooltip + Solution. Issue = afterDraw()

I notice that the trendlines overlap the Tooltips.

I am not familiar with github pull requests and option but I thought maybe by showing the code here that any of the contributors could pick it up. As I love this nice plugin.

The Issue:
Looking at the code I saw the afterDraw() being used. That is creating the trendline after everything else in the canvas has been draw. This is called drawing time in canvas. Tooltips are set on afterDraw() as they will be on top. So this plugin which would load after everything else that has been draw will do exactly the same on top of the tooltip.

Solution:
Instead of afterDraw the drawing time should be after the datasets (the bar shapes or line elements) has been draw. To do this the code of afterDraw() must be replaced with afterDatasetsDraw().

// in this line is your issue:
var pluginTrendlineLinear={id:"chartjs-plugin-trendline",afterDraw:function(t){var i,e;for(var a in t.scales)if("x"==a[0]?

// It should be:
var pluginTrendlineLinear={id:"chartjs-plugin-trendline",afterDatasetsDraw:function(t){var i,e;for(var a in t.scales)if("x"==a[0]?

I already solved it in my own code but hope anyone can solve it so everyone else will benefit it.

Use with react-chartjs-2

I can't seem to get this working with React-Chartjs-2, any tips?

Cannot read property 'register' of undefined

Hi,

Trying to use this plugin with Chart JS 3.2. Anything above Chart JS 2.9.4 gives me this error:

Uncaught TypeError: Cannot read property 'register' of undefined
    at chartjs-plugin-trendline.min.js:formatted:93

Trendline is inlined after chartjs. Chart is being created after an AJAX call for data.

Calling "window.Chart.plugins" on document ready gives "undefined". Is this something that changed with version 3 of Chart JS and needs an update on Trendline side?

Trendline start at first datapoint possible?

Currently im using the chartjs-plugin-trendline on a linechart with the X and Y format in angular 7. I got the trendline working and it works quite good! There is one issue though:

In my case the trendline is only useful when the trendline starts at the first datapoint of my dataset.

Is it possible to do make the trendline start at the first datapoint of my dataset?

Does this work for time series data?

Thanks for this great plugin! I am working with time series data in the format like:

 data:  [{
                        x: "01/04/2014", y: 175
                    }, {
                        x: "01/10/2014", y: 175
                    }, {
                        x: "01/04/2015", y: 178
                    }, {
                        x: "01/10/2015", y: 178
                    }]

For time series lines and I can't seem to figure out how to get this Plugin to work. I get chartjs-plugin-trendline.min.js:1 Uncaught TypeError: Cannot read property 'getPixelForValue' of undefined

CVE-2019-10747 (High) detected in set-value-2.0.0.tgz, set-value-0.4.3.tgz

CVE-2019-10747 - High Severity Vulnerability

Vulnerable Libraries - set-value-2.0.0.tgz, set-value-0.4.3.tgz

set-value-2.0.0.tgz

Create nested values and any intermediaries using dot notation (`'a.b.c'`) paths.

Library home page: https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz

Path to dependency file: /chartjs-plugin-trendline/package.json

Path to vulnerable library: /tmp/git/chartjs-plugin-trendline/node_modules/set-value/package.json

Dependency Hierarchy:

gulp-4.0.0.tgz (Root Library)
- glob-watcher-5.0.3.tgz
  - anymatch-2.0.0.tgz
    - micromatch-3.1.10.tgz
      - snapdragon-0.8.2.tgz
        
        base-0.11.2.tgz
        
        cache-base-1.0.1.tgz
        
        ❌ set-value-2.0.0.tgz (Vulnerable Library)

set-value-0.4.3.tgz

Create nested values and any intermediaries using dot notation (`'a.b.c'`) paths.

Library home page: https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz

Path to dependency file: /chartjs-plugin-trendline/package.json

Path to vulnerable library: /tmp/git/chartjs-plugin-trendline/node_modules/union-value/node_modules/set-value/package.json

Dependency Hierarchy:

gulp-4.0.0.tgz (Root Library)
- glob-watcher-5.0.3.tgz
  - anymatch-2.0.0.tgz
    - micromatch-3.1.10.tgz
      - snapdragon-0.8.2.tgz
        
        base-0.11.2.tgz
        
        cache-base-1.0.1.tgz
        
        union-value-1.0.0.tgz
        
        ❌ set-value-0.4.3.tgz (Vulnerable Library)

Found in HEAD commit: bfbc30c828894a047d43c9d9099d56c04a758154

Vulnerability Details

A vulnerability was found in set-value before 2.0.1 and from 3.0.0 before 3.0.1 previously reported as WS-2019-0176

Publish Date: 2019-07-24

URL: CVE-2019-10747

CVSS 2 Score Details (7.4)

Base Score Metrics not available

Suggested Fix

Type: Upgrade version

Origin: jonschlinkert/set-value@95e9d99

Release Date: 2019-07-24

Fix Resolution: 2.0.1,3.0.1

Step up your Open Source Security Game with WhiteSource here

Angular 12.1.2 | Typescript error while importing chartjs-plugin-trendline

I followed the instructions to install the plugin in my Angular 12.1.2 application using -
npm i chartjs-plugin-trendline

On importing chartTrendLine, using this command -
import {Chart, ChartConfiguration, ChartDataset, registerables} from 'chart.js';
import chartTrendline from "chartjs-plugin-trendline";

I get the following error -
"TS7016: Could not find a declaration file for module 'chartjs-plugin-trendline'. '/Users/anubhav.aggarwal/Documents/polaris-repo/polaris-web-app/node_modules/chartjs-plugin-trendline/src/chartjs-plugin-trendline.js' implicitly has an 'any' type. Try npm i --save-dev @types/chartjs-plugin-trendline if it exists or add a new declaration (.d.ts) file containing declare module 'chartjs-plugin-trendline';"

Hence, I'm not able to register the plugin using following command -
Chart.register(chartTrendline);

Kindly help.

Old version is downloaded

I'm using npm, and when I want to download the latest version 0.0.3 ("chartjs-plugin-trendline": "0.0.3", in package.json), looks like the old one 0.0.1 is downloaded. Could you please check it, what is wrong ? Thanks!

Trendline projecting out future values

Hi. I have a graph that has values for Jan, Feb, Mar and April. I have added the trendline and that works ok. What my customer wants is the trendline to project out for the remaining months of the year based on a linear regression for the values that were there and projecting out the future values. Is this possible. Also want to add a legend entry for the trend line - is this possible ? Thanks.

Trendline showing wrong direction

Trendline showing wrong direction when the array contains NULLS or ZEROS.

Could there be an option to use regression.

Would be good if the readme file mentions how the trendline is calculated.

Thanks, looks very promising. have a great festive season

Error when trying to apply the trendline to a dataset with no data

Hi, im getting these errors when trying to apply this plugin to a dataset with no data

chartjs-plugin-trendline.js:45 Uncaught TypeError: Cannot read property '_model' of undefined
    at addFitter (chartjs-plugin-trendline.js:45)
    at chartjs-plugin-trendline.js:27
    at Array.forEach (<anonymous>)
    at Object.beforeDraw (chartjs-plugin-trendline.js:24)
    at Object.notify (Chart.min.js:10)
    at t.draw (Chart.min.js:10)
    at t.render (Chart.min.js:10)
    at t.update (Chart.min.js:10)
    at t.resize (Chart.min.js:10)
    at n (Chart.min.js:10)
chartjs-plugin-trendline.js:45 Uncaught (in promise) TypeError: Cannot read property '_model' of undefined
    at addFitter (chartjs-plugin-trendline.js:45)
    at chartjs-plugin-trendline.js:27
    at Array.forEach (<anonymous>)
    at Object.beforeDraw (chartjs-plugin-trendline.js:24)
    at Object.notify (Chart.min.js:10)
    at t.draw (Chart.min.js:10)
    at t.render (Chart.min.js:10)
    at t.update (Chart.min.js:10)
    at account.js:326

heres my code

{
        label: "words 100",
        fill: false,
        data: [],
        borderColor: '#FFC107',
        borderWidth: 2,
        trendlineLinear: {
          style: "rgba(255,193,7,.25)",
          lineStyle: "solid",
          width: 1
        }
      },

Ive tested this and im pretty sure the data being an empty list is the issue, because removing 'trendlinenear' doesnt crash the script.

How to add legends to the chart for the Trendline in the ChartJS 2.0?

I have to add the legend for the Trendline in a bar chart, which is generated using Chart JS 2.0. Kindly let me know how to add the legend for Trendline

Angular 12.2 |

CVE-2019-10746 (High) detected in mixin-deep-1.3.1.tgz

CVE-2019-10746 - High Severity Vulnerability

Vulnerable Library - mixin-deep-1.3.1.tgz

Deeply mix the properties of objects into the first object. Like merge-deep, but doesn't clone.

Library home page: https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz

Path to dependency file: /chartjs-plugin-trendline/package.json

Path to vulnerable library: /tmp/git/chartjs-plugin-trendline/node_modules/mixin-deep/package.json

Dependency Hierarchy:

gulp-4.0.0.tgz (Root Library)
- glob-watcher-5.0.3.tgz
  - anymatch-2.0.0.tgz
    - micromatch-3.1.10.tgz
      - snapdragon-0.8.2.tgz
        
        base-0.11.2.tgz
        
        ❌ mixin-deep-1.3.1.tgz (Vulnerable Library)

Found in HEAD commit: bfbc30c828894a047d43c9d9099d56c04a758154

Vulnerability Details

mixin-deep before 1.3.2 is vulnerable to Prototype Pollution.

Publish Date: 2019-07-11

URL: CVE-2019-10746

CVSS 2 Score Details (7.5)

Base Score Metrics not available

Suggested Fix

Type: Upgrade version

Origin: jonschlinkert/mixin-deep@8f464c8

Release Date: 2019-07-11

Fix Resolution: 1.3.2

Step up your Open Source Security Game with WhiteSource here

How to define specific data to be calculated in trendline

Case

I only want use data from 00 until 12 to create trendline, so the trendline will not include the latest data. How to implement this case?

Note: i want only data inside blue border which is calculated to form trendline

Trendline goes below bottom axis on sharp downwards trends

trendlineLinear with react-chartjs-2

I installed the pluggin and added to my dataset, but the line doesn't seem to show. Other issues here seemed to have had it fixed, any ideas?

datasets: [ { label: "New York", data: NY.map(item => { return { x: item.year, y: item.max.toFixed(2) }; }), trendlineLinear: { style: "red", lineStyle: "line", width: 1 }, pointBackgroundColor: "black", borderColor: "black", backgroundColor: "black", borderWidth: 1, showLine: false, fill: false, pointStyle: "cross" } } ]

Maybe its because I'm not importing into react? How do I do that because its a pluggin of chart.js. Doing import {trendlineLinear} from "chartjs-plugin-trendline" hasn't worked

Trendline works fine only if all y values are defined?

I attach two screenshots.
Is there a work around to the problem?
First case, all data is defined: works

Second case, one y value is zero.

The plugin only supports trendline in bar chart. Is it possible to have trendline in scatter chart too?

Line jumps when toggling dataset

First of all thank you for the amazing plugin :)

But i have an issue: i have a graph with multiple datasets and only the first dataset uses the trendline. All others are hidden at the beginning and all works fine.

But when i toogle the first dataset and show another one the line jumps. I attached a screen since its hard to explain.

Thank you

Trendline for second Y axis

The trend line for a second Y axis is plotted on the first Y axis therefore it does not match the scale of the datapoint it represents. Is there a way to plot the trend line on a secondary (righthand) Y axis?

Trendline z-index is too high

I have a problem with z-index of trendline. It covers my tooltip and there is no way of chaning z- index of it (same as for trendline). Is there anything i can do about it?

Trendline outside of chart area boundary

I'm using latest trendline with scatter chart and also using the chartjs-zoom-pan plugin. While trendline seems to be computed correctly i get anomalous behavior when i drag the chart. The trendline wants to use the white area to the left and right of the chart for drawing itself, but this is not a charting area (scatter dots do not show same behavior).

A chart with no datapoints breaks when trying to render a trend line

If I render a chart where all of its datasets are empty, or if I empty the dataset of a chart already rendered, the chart will bork and no longer allow itself to be modified. This only occurs when trendlineLinear is included in the options. The browser console spits out:

Uncaught TypeError: t.data[0] is undefined

It would be nice if, on such an occasion, the trendline simply didn't render.

Adding gradient information for the trendline

I have added the trendline, but the most interesting information for me is its slope/gradient. Could it possible to make this information available so I can not only draw the trendline but also display the value of its gradient?

Thanks a lot!

Simple Gradient Line

Hey
First of all thank you for a great package

I added simple gradient trend line here
Could you check
#67

CVE-2020-7608 (Medium) detected in yargs-parser-5.0.0.tgz

CVE-2020-7608 - Medium Severity Vulnerability

Vulnerable Library - yargs-parser-5.0.0.tgz

the mighty option parser used by yargs

Library home page: https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz

Path to dependency file: chartjs-plugin-trendline/package.json

Path to vulnerable library: chartjs-plugin-trendline/node_modules/yargs-parser/package.json

Dependency Hierarchy:

gulp-4.0.2.tgz (Root Library)
- gulp-cli-2.2.0.tgz
  - yargs-7.1.0.tgz
    - ❌ yargs-parser-5.0.0.tgz (Vulnerable Library)

Found in base branch: master

Vulnerability Details

yargs-parser could be tricked into adding or modifying properties of Object.prototype using a "proto" payload.

Publish Date: 2020-03-16

URL: CVE-2020-7608

CVSS 3 Score Details (5.3)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Local
- Attack Complexity: Low
- Privileges Required: Low
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: Low
- Integrity Impact: Low
- Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2020-7608

Release Date: 2020-03-16

Fix Resolution: v18.1.1;13.1.2;15.0.1

Step up your Open Source Security Game with WhiteSource here

Trendline is drawn behind the bar chart

Thanks for this amazing line. I have a difficulty in continuing with this fix.

As you can see in the image that the trend line is being drawn behind the chart. Is there a way to bring the trend line to front.

Appreciate your help.

Other trendlines functions

Hello,

first of all I'm so glad to use your trendline plugin, I'd been looking for such a plugin for a long time.

It works fine! Thank you!

I wonder if you would plan other trendlines functions than linear: polynomial, exponential...?

And if one day we could change the trendline type just like this:

(exponential for example)

trendlineExponential: { style: "rgb(0, 0, 0, 0.7)", lineStyle: "solid", width: 1 }

Is this something you may think about?

Best wishes for this new year.

Trendline does not show

i have added chartjs-plugin-trendline.js file but it does not show the trend line Please help me

Here is my code

Html Code

angular js code

    vm.overallGraphOptions = {
        elements:
            {
                point:
                    {
                        radius: 9,
                        hoverRadius: 7.5
                    }
            },

        trendlineLinear: {
            style: "rgba(255,105,180, .8)",
            width: 2
        }
        layout: {
            padding: {
                left: 5000,
                right: 0,
                top: 0,
                bottom: 0
            }
        },

        scales: {
            xAxes: [{
                gridLines: {
                    display: true
                },
                ticks: {
                    display: true
                }
            }],
            yAxes: [{
                type: "linear",
                position: "left",
                id: 'satisfaction',
                gridLines: {
                    display: true
                },
                ticks: {
                    display: true,
                    min: 0,
                    max: 10,
                    callback: function (label, index, labels) {
                        return label * 10;
                    },
                },
                labels: {
                    show: true,
                }
            },
            {
                type: "linear",
                position: "right",
                id: 'responses',
                gridLines: {
                    display: false
                },
                ticks: {
                    display: false
                },
                labels: {
                    show: true,
                }
            }],
        }
    }

Hide trendline when dataset is hidden

Thank you for the great plugin.

If hidden: true on a dataset, the trendline still displays. Is there a method to allow the trendline to also hide?

Compatible with ChartJS 3.6?

I'm getting some mixed messages here. Your About says Made for Chart.js > 2.0, but your README.md says Made for Chart.js 3.X. However, your documentation on how to add it to a chart doesn't seem to work with v3.6.

Any thoughts?

I have a Stackblitz here that shows how I attempted to implement it.
https://stackblitz.com/edit/chart-js-version-3-ygaa31?file=src/app/app.component.ts

TYIA!

Bug in 2.0.3: Error when first data point is 0, "The provided double value is non-finite"

when the first value in data array is 0

let data = {
    "labels": [
        202303,
        202304,
        202305,
        202306
    ],
    "datasets": [
        {
            "data": [
                0,
                1,
                3,
                6
            ],
            "label": "Test",
            "borderColor": "#409b8c",
            "trendlineLinear": {
                "style": "#409b8c",
                "lineStyle": "dotted",
                "width": 1,
                "projection": false
            }
        }
    ]
};

the following error gets thrown:

Uncaught TypeError: Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite. at addFitter (chartjs-plugin-trendline.js:136:24)

Changing the first value to any int > 0 solves this issue, every other data point can be 0. Values < 0 cause this error as well.

let data = {
    "labels": [
        202303,
        202304,
        202305,
        202306
    ],
    "datasets": [
        {
            "data": [
                2
                0,
                3,
                6
            ],
            "label": "Test",
            "borderColor": "#409b8c",
            "trendlineLinear": {
                "style": "#409b8c",
                "lineStyle": "dotted",
                "width": 1,
                "projection": false
            }
        }
    ]
};

Here's a codepen with the reproducible issue:

https://codepen.io/tsnork/pen/RwqqaJg

Thx for your work with this library!

makanz / chartjs-plugin-trendline Goto Github PK

chartjs-plugin-trendline's Introduction

chartjs-plugin-trendline

Installation

Load directly in the browser

As a Chart.JS plugin

Configuration

Supported chart types

Contributing

License

chartjs-plugin-trendline's People

Contributors

Stargazers

Watchers

Forkers

chartjs-plugin-trendline's Issues

CVE-2019-20149 - High Severity Vulnerability

it should be like this

CVE-2020-7598 - Medium Severity Vulnerability

CVE-2020-7746 - High Severity Vulnerability

CVE-2019-10747 - High Severity Vulnerability

CVE-2019-10746 - High Severity Vulnerability

Case

CVE-2020-7608 - Medium Severity Vulnerability

Recommend Projects

Recommend Topics

Recommend Org