makanz / chartjs-plugin-trendline Goto Github PK
View Code? Open in Web Editor NEWThis plugin draws an linear trendline in your Chart. Made for Chart.js > 3.0
License: MIT License
This plugin draws an linear trendline in your Chart. Made for Chart.js > 3.0
License: MIT License
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).
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.
My code is this:
`
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script><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>
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!
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
Any chance to make this feature available for line charts as well?
parse argument options
Library home page: https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz
Dependency Hierarchy:
parse argument options
Library home page: https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz
Dependency Hierarchy:
Found in base branch: master
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
Base Score Metrics:
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
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
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:
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
Base Score Metrics:
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
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
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:
Found in base branch: master
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
Base Score Metrics:
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
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?
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?
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
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!
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
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!
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.
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
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
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.
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
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:
<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>Chart:
. . .
trendlineLinear: {
colorMin: "red",
colorMax: "green",
lineStyle: "dotted",
width: 1,
projection: false
}
. . .
Do you have any suggestions on how to make this working in chat.js versions 4.x?
@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
<!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>
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?
Hey
First of all thank you for a great package
I added simple gradient trend line here
Could you check
#67
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.
I can't seem to get this working with React-Chartjs-2, any tips?
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:
Found in HEAD commit: bfbc30c828894a047d43c9d9099d56c04a758154
mixin-deep before 1.3.2 is vulnerable to Prototype Pollution.
Publish Date: 2019-07-11
URL: CVE-2019-10746
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
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?
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,
}
}],
}
}
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:
Found in base branch: master
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
Base Score Metrics:
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
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.
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:
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:
Found in HEAD commit: bfbc30c828894a047d43c9d9099d56c04a758154
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
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
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?
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.
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
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?
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
I tried adding it using addPlugin, or registering it to Chart plugins, both didn't work
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.