feat: add trailingDot option

src/js/charts/AxisChart.js

@@ -303,6 +303,8 @@ export default class AxisChart extends BaseChart {
 					regionFill: this.lineOptions.regionFill,
 					spline: this.lineOptions.spline,
 					showDots: this.lineOptions.showDots,
+					trailingDot: this.lineOptions.trailingDot,
+					hideDotBorder: this.lineOptions.hideDotBorder,
 					hideLine: this.lineOptions.hideLine,
 
 					// same for all datasets

src/js/objects/ChartComponents.js

@@ -384,7 +384,7 @@ let componentConfigs = {
 				);
 			}
 
-			this.units = [];
+						this.units = [];
 			if (c.showDots) {
 				this.units = data.yPositions.map((y, j) => {
 					return datasetDot(
@@ -393,11 +393,27 @@ let componentConfigs = {
 						data.radius,
 						c.color,
 						(c.valuesOverPoints ? data.values[j] : ''),
-						j
+						j,
+						c.hideDotBorder
 					);
 				});
 			}
 
+			if (c.trailingDot && !c.showDots) {
+				const lastIndex = data.yPositions.length - 1;
+				const dot = datasetDot(
+					data.xPositions[lastIndex],
+					data.yPositions[lastIndex],
+					data.radius,
+					c.color,
+					(c.valuesOverPoints ? data.values[lastIndex] : ''),
+					lastIndex,
+					c.hideDotBorder
+				);
+
+				this.units.push(dot);
+			}
+
 			return Object.values(this.paths).concat(this.units);
 		},
 		animateElements(newData) {

src/js/utils/draw.js

@@ -573,9 +573,9 @@ export function datasetBar(x, yTop, width, color, label = '', index = 0, offset
 	}
 }
 
-export function datasetDot(x, y, radius, color, label = '', index = 0) {
+export function datasetDot(x, y, radius, color, label = '', index = 0, hideDotBorder = false) {
 	let dot = createSVG('circle', {
-		style: `fill: ${color}`,
+		style: `fill: ${color} ${hideDotBorder ? `stroke: ${color}`: ''}`,
 		'data-point-index': index,
 		cx: x,
 		cy: y,