chartjs-plugin-trendline 3.2.0 → 3.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/copilot-instructions.md +40 -40
- package/.github/workflows/release.yml +64 -61
- package/.github/workflows/tests.yml +26 -26
- package/.prettierrc +5 -5
- package/CLAUDE.md +44 -44
- package/GEMINI.md +40 -40
- package/LICENSE +21 -21
- package/MIGRATION.md +126 -126
- package/README.md +166 -166
- package/babel.config.js +3 -3
- package/changelog.md +39 -39
- package/dist/chartjs-plugin-trendline.cjs +884 -885
- package/dist/chartjs-plugin-trendline.esm.js +882 -883
- package/dist/chartjs-plugin-trendline.js +890 -891
- package/dist/chartjs-plugin-trendline.min.js +8 -8
- package/dist/chartjs-plugin-trendline.min.js.map +1 -1
- package/example/barChart.html +165 -165
- package/example/barChartWithNullValues.html +168 -168
- package/example/barChart_label.html +174 -174
- package/example/exponentialChart.html +244 -244
- package/example/lineChart.html +210 -210
- package/example/lineChartProjection.html +261 -261
- package/example/lineChartTypeTime.html +190 -190
- package/example/scatterChart.html +136 -136
- package/example/scatterProjection.html +141 -141
- package/example/test-null-handling.html +59 -59
- package/index.html +215 -215
- package/jest.config.js +4 -4
- package/package.json +45 -40
- package/rollup.config.js +54 -54
- package/src/components/label.js +56 -56
- package/src/components/label.test.js +129 -129
- package/src/components/trendline.js +375 -375
- package/src/components/trendline.test.js +789 -789
- package/src/core/plugin.js +78 -79
- package/src/core/plugin.test.js +307 -0
- package/src/index.js +12 -12
- package/src/utils/drawing.js +125 -125
- package/src/utils/drawing.test.js +308 -308
- package/src/utils/exponentialFitter.js +146 -146
- package/src/utils/exponentialFitter.test.js +362 -362
- package/src/utils/lineFitter.js +86 -86
- package/src/utils/lineFitter.test.js +340 -340
|
@@ -1,175 +1,175 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
|
-
<title>Bar Chart with Label - Chart.js Trendline Plugin</title>
|
|
8
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
|
|
9
|
-
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
|
|
10
|
-
<style>
|
|
11
|
-
body {
|
|
12
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
-
margin: 0;
|
|
14
|
-
padding: 40px 20px;
|
|
15
|
-
background-color: #f8f9fa;
|
|
16
|
-
color: #333;
|
|
17
|
-
line-height: 1.6;
|
|
18
|
-
}
|
|
19
|
-
.container {
|
|
20
|
-
max-width: 1000px;
|
|
21
|
-
margin: 0 auto;
|
|
22
|
-
}
|
|
23
|
-
h1 {
|
|
24
|
-
text-align: center;
|
|
25
|
-
color: #2c3e50;
|
|
26
|
-
margin-bottom: 10px;
|
|
27
|
-
font-size: 2.5rem;
|
|
28
|
-
}
|
|
29
|
-
.subtitle {
|
|
30
|
-
text-align: center;
|
|
31
|
-
color: #7f8c8d;
|
|
32
|
-
margin-bottom: 40px;
|
|
33
|
-
font-size: 1.1rem;
|
|
34
|
-
}
|
|
35
|
-
.chart-container {
|
|
36
|
-
background: white;
|
|
37
|
-
padding: 30px;
|
|
38
|
-
border-radius: 8px;
|
|
39
|
-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
40
|
-
margin-bottom: 30px;
|
|
41
|
-
}
|
|
42
|
-
.chart-wrapper {
|
|
43
|
-
position: relative;
|
|
44
|
-
height: 400px;
|
|
45
|
-
}
|
|
46
|
-
.info-section {
|
|
47
|
-
background: white;
|
|
48
|
-
padding: 25px;
|
|
49
|
-
border-radius: 8px;
|
|
50
|
-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
51
|
-
margin-bottom: 20px;
|
|
52
|
-
}
|
|
53
|
-
.info-section h3 {
|
|
54
|
-
margin-top: 0;
|
|
55
|
-
color: #2c3e50;
|
|
56
|
-
border-bottom: 2px solid #3498db;
|
|
57
|
-
padding-bottom: 10px;
|
|
58
|
-
}
|
|
59
|
-
.nav-links {
|
|
60
|
-
text-align: center;
|
|
61
|
-
margin-top: 30px;
|
|
62
|
-
}
|
|
63
|
-
.nav-links a {
|
|
64
|
-
display: inline-block;
|
|
65
|
-
margin: 0 10px;
|
|
66
|
-
padding: 10px 20px;
|
|
67
|
-
background: #3498db;
|
|
68
|
-
color: white;
|
|
69
|
-
text-decoration: none;
|
|
70
|
-
border-radius: 4px;
|
|
71
|
-
font-weight: 500;
|
|
72
|
-
transition: background-color 0.2s;
|
|
73
|
-
}
|
|
74
|
-
.nav-links a:hover {
|
|
75
|
-
background: #2980b9;
|
|
76
|
-
}
|
|
77
|
-
code {
|
|
78
|
-
background: #f8f9fa;
|
|
79
|
-
padding: 2px 6px;
|
|
80
|
-
border-radius: 3px;
|
|
81
|
-
font-family: 'Monaco', 'Menlo', monospace;
|
|
82
|
-
}
|
|
83
|
-
</style>
|
|
84
|
-
</head>
|
|
85
|
-
<body>
|
|
86
|
-
<div class="container">
|
|
87
|
-
<h1>Bar Chart with Trendline Label</h1>
|
|
88
|
-
<p class="subtitle">Demonstrates trendline with custom label displaying percentage</p>
|
|
89
|
-
|
|
90
|
-
<div class="chart-container">
|
|
91
|
-
<div class="chart-wrapper">
|
|
92
|
-
<canvas id="bar-chart"></canvas>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<div class="info-section">
|
|
97
|
-
<h3>Configuration Used</h3>
|
|
98
|
-
<p>This example shows a bar chart with a <code>dotted</code> trendline that includes a custom label. The trendline is configured with:</p>
|
|
99
|
-
<ul>
|
|
100
|
-
<li><strong>colorMin:</strong> <code>"rgba(255,105,180, .8)"</code> - Pink semi-transparent color</li>
|
|
101
|
-
<li><strong>lineStyle:</strong> <code>"dotted"</code> - Dotted line pattern</li>
|
|
102
|
-
<li><strong>width:</strong> <code>2</code> - Line width of 2 pixels</li>
|
|
103
|
-
<li><strong>label:</strong> Custom label with black text, percentage display, and 10px offset</li>
|
|
104
|
-
</ul>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div class="nav-links">
|
|
108
|
-
<a href="../index.html">← Back to Examples</a>
|
|
109
|
-
<a href="barChart.html">← Basic Bar Chart</a>
|
|
110
|
-
<a href="barChartWithNullValues.html">Bar Chart with Null Values →</a>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
<script>
|
|
115
|
-
document.addEventListener("DOMContentLoaded", function () {
|
|
116
|
-
new Chart(document.getElementById("bar-chart"), {
|
|
117
|
-
type: 'bar',
|
|
118
|
-
data: {
|
|
119
|
-
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
|
120
|
-
datasets: [
|
|
121
|
-
{
|
|
122
|
-
label: "Population (millions)",
|
|
123
|
-
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
|
|
124
|
-
data: [500, 1555, 650, 1555, 2505],
|
|
125
|
-
trendlineLinear: {
|
|
126
|
-
label: {
|
|
127
|
-
color: "#000",
|
|
128
|
-
text: "Trendline label",
|
|
129
|
-
display: true,
|
|
130
|
-
percentage: true,
|
|
131
|
-
offset: 10
|
|
132
|
-
},
|
|
133
|
-
colorMin: "rgba(255,105,180, .8)",
|
|
134
|
-
lineStyle: "dotted",
|
|
135
|
-
width: 2
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
]
|
|
139
|
-
},
|
|
140
|
-
options: {
|
|
141
|
-
responsive: true,
|
|
142
|
-
maintainAspectRatio: false,
|
|
143
|
-
plugins: {
|
|
144
|
-
legend: {
|
|
145
|
-
display: false
|
|
146
|
-
},
|
|
147
|
-
title: {
|
|
148
|
-
display: true,
|
|
149
|
-
text: 'Population Data with Trendline Label',
|
|
150
|
-
font: {
|
|
151
|
-
size: 16
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
},
|
|
155
|
-
scales: {
|
|
156
|
-
y: {
|
|
157
|
-
beginAtZero: true,
|
|
158
|
-
title: {
|
|
159
|
-
display: true,
|
|
160
|
-
text: 'Population (millions)'
|
|
161
|
-
}
|
|
162
|
-
},
|
|
163
|
-
x: {
|
|
164
|
-
title: {
|
|
165
|
-
display: true,
|
|
166
|
-
text: 'Regions'
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
});
|
|
173
|
-
</script>
|
|
174
|
-
</body>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
|
+
<title>Bar Chart with Label - Chart.js Trendline Plugin</title>
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
body {
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 40px 20px;
|
|
15
|
+
background-color: #f8f9fa;
|
|
16
|
+
color: #333;
|
|
17
|
+
line-height: 1.6;
|
|
18
|
+
}
|
|
19
|
+
.container {
|
|
20
|
+
max-width: 1000px;
|
|
21
|
+
margin: 0 auto;
|
|
22
|
+
}
|
|
23
|
+
h1 {
|
|
24
|
+
text-align: center;
|
|
25
|
+
color: #2c3e50;
|
|
26
|
+
margin-bottom: 10px;
|
|
27
|
+
font-size: 2.5rem;
|
|
28
|
+
}
|
|
29
|
+
.subtitle {
|
|
30
|
+
text-align: center;
|
|
31
|
+
color: #7f8c8d;
|
|
32
|
+
margin-bottom: 40px;
|
|
33
|
+
font-size: 1.1rem;
|
|
34
|
+
}
|
|
35
|
+
.chart-container {
|
|
36
|
+
background: white;
|
|
37
|
+
padding: 30px;
|
|
38
|
+
border-radius: 8px;
|
|
39
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
40
|
+
margin-bottom: 30px;
|
|
41
|
+
}
|
|
42
|
+
.chart-wrapper {
|
|
43
|
+
position: relative;
|
|
44
|
+
height: 400px;
|
|
45
|
+
}
|
|
46
|
+
.info-section {
|
|
47
|
+
background: white;
|
|
48
|
+
padding: 25px;
|
|
49
|
+
border-radius: 8px;
|
|
50
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
51
|
+
margin-bottom: 20px;
|
|
52
|
+
}
|
|
53
|
+
.info-section h3 {
|
|
54
|
+
margin-top: 0;
|
|
55
|
+
color: #2c3e50;
|
|
56
|
+
border-bottom: 2px solid #3498db;
|
|
57
|
+
padding-bottom: 10px;
|
|
58
|
+
}
|
|
59
|
+
.nav-links {
|
|
60
|
+
text-align: center;
|
|
61
|
+
margin-top: 30px;
|
|
62
|
+
}
|
|
63
|
+
.nav-links a {
|
|
64
|
+
display: inline-block;
|
|
65
|
+
margin: 0 10px;
|
|
66
|
+
padding: 10px 20px;
|
|
67
|
+
background: #3498db;
|
|
68
|
+
color: white;
|
|
69
|
+
text-decoration: none;
|
|
70
|
+
border-radius: 4px;
|
|
71
|
+
font-weight: 500;
|
|
72
|
+
transition: background-color 0.2s;
|
|
73
|
+
}
|
|
74
|
+
.nav-links a:hover {
|
|
75
|
+
background: #2980b9;
|
|
76
|
+
}
|
|
77
|
+
code {
|
|
78
|
+
background: #f8f9fa;
|
|
79
|
+
padding: 2px 6px;
|
|
80
|
+
border-radius: 3px;
|
|
81
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
82
|
+
}
|
|
83
|
+
</style>
|
|
84
|
+
</head>
|
|
85
|
+
<body>
|
|
86
|
+
<div class="container">
|
|
87
|
+
<h1>Bar Chart with Trendline Label</h1>
|
|
88
|
+
<p class="subtitle">Demonstrates trendline with custom label displaying percentage</p>
|
|
89
|
+
|
|
90
|
+
<div class="chart-container">
|
|
91
|
+
<div class="chart-wrapper">
|
|
92
|
+
<canvas id="bar-chart"></canvas>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="info-section">
|
|
97
|
+
<h3>Configuration Used</h3>
|
|
98
|
+
<p>This example shows a bar chart with a <code>dotted</code> trendline that includes a custom label. The trendline is configured with:</p>
|
|
99
|
+
<ul>
|
|
100
|
+
<li><strong>colorMin:</strong> <code>"rgba(255,105,180, .8)"</code> - Pink semi-transparent color</li>
|
|
101
|
+
<li><strong>lineStyle:</strong> <code>"dotted"</code> - Dotted line pattern</li>
|
|
102
|
+
<li><strong>width:</strong> <code>2</code> - Line width of 2 pixels</li>
|
|
103
|
+
<li><strong>label:</strong> Custom label with black text, percentage display, and 10px offset</li>
|
|
104
|
+
</ul>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div class="nav-links">
|
|
108
|
+
<a href="../index.html">← Back to Examples</a>
|
|
109
|
+
<a href="barChart.html">← Basic Bar Chart</a>
|
|
110
|
+
<a href="barChartWithNullValues.html">Bar Chart with Null Values →</a>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<script>
|
|
115
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
116
|
+
new Chart(document.getElementById("bar-chart"), {
|
|
117
|
+
type: 'bar',
|
|
118
|
+
data: {
|
|
119
|
+
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
|
120
|
+
datasets: [
|
|
121
|
+
{
|
|
122
|
+
label: "Population (millions)",
|
|
123
|
+
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
|
|
124
|
+
data: [500, 1555, 650, 1555, 2505],
|
|
125
|
+
trendlineLinear: {
|
|
126
|
+
label: {
|
|
127
|
+
color: "#000",
|
|
128
|
+
text: "Trendline label",
|
|
129
|
+
display: true,
|
|
130
|
+
percentage: true,
|
|
131
|
+
offset: 10
|
|
132
|
+
},
|
|
133
|
+
colorMin: "rgba(255,105,180, .8)",
|
|
134
|
+
lineStyle: "dotted",
|
|
135
|
+
width: 2
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
]
|
|
139
|
+
},
|
|
140
|
+
options: {
|
|
141
|
+
responsive: true,
|
|
142
|
+
maintainAspectRatio: false,
|
|
143
|
+
plugins: {
|
|
144
|
+
legend: {
|
|
145
|
+
display: false
|
|
146
|
+
},
|
|
147
|
+
title: {
|
|
148
|
+
display: true,
|
|
149
|
+
text: 'Population Data with Trendline Label',
|
|
150
|
+
font: {
|
|
151
|
+
size: 16
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
scales: {
|
|
156
|
+
y: {
|
|
157
|
+
beginAtZero: true,
|
|
158
|
+
title: {
|
|
159
|
+
display: true,
|
|
160
|
+
text: 'Population (millions)'
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
x: {
|
|
164
|
+
title: {
|
|
165
|
+
display: true,
|
|
166
|
+
text: 'Regions'
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
|
+
});
|
|
173
|
+
</script>
|
|
174
|
+
</body>
|
|
175
175
|
</html>
|