diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js index 6174200..6d57488 100644 --- a/src/js/charts/AxisChart.js +++ b/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 diff --git a/src/js/objects/ChartComponents.js b/src/js/objects/ChartComponents.js index 5cbd5bb..a0d01c7 100644 --- a/src/js/objects/ChartComponents.js +++ b/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) { diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 2f5c9c5..c7d75a6 100644 --- a/src/js/utils/draw.js +++ b/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,